{{ 'hotspot-style-1.css' | asset_url | stylesheet_tag }}
{{ 'reviews.css' | asset_url | stylesheet_tag }}
{{ 'product-info-variant.css' | asset_url | stylesheet_tag }}
{{ 'section-quick-view-content.css' | asset_url | stylesheet_tag }}
{{ 'badge.css' | asset_url | stylesheet_tag }}
{{ 'product-info-content-quickview.css' | asset_url | stylesheet_tag }}
{{ 'product-info-media-style3.css' | asset_url | stylesheet_tag }}
{{ 'countdown-stock.css' | asset_url | stylesheet_tag }}
{{ 'countdown-time.css' | asset_url | stylesheet_tag }}

{%- comment -%}
  Renders a background image with 5 hotspot triggers

  Usage:
  {% render 'hotspot-style-1',
    hotspot_image: block.settings.hotspot_image,
    media_aspect_ratio: section.settings.media_aspect_ratio,
    custom_ratio: section.settings.custom_ratio,
    block: block
  %}
{%- endcomment -%}
{% assign featured_media = product.selected_or_first_available_variant.featured_media %}
{% assign aspect_ratio = settings.product_card_aspect_ratio %}

<xo-product xo-product-id='{{ product.id }}'>
  <div class='hotspot-style1'>
    <div class='hotspot-style1__bg'>
      {% if section.settings.custom_ratio %}
        {% render 'image', image: hotspot_image, media_aspect_ratio: section.settings.custom_ratio_text %}
      {% else %}
        {% render 'image', image: hotspot_image, aspect_ratio: media_aspect_ratio %}
      {% endif %}
    </div>
    {% for i in (1..5) %}
      {% assign top__ = 'top_' | append: i %}
      {% assign top = block.settings[top__] %}
      {% assign left__ = 'left_' | append: i %}
      {% assign left = block.settings[left__] %}
      {% assign placement__ = 'placement_' | append: i %}
      {% assign placement = block.settings[placement__] %}
      {% assign product__ = 'product_' | append: i %}
      {% assign product = block.settings[product__] %}
      {% if product != blank %}
        {%- assign prod = all_products[product] -%}
        {% assign index = index | plus: 1 %}

        <div
          class='hotspot-style1__point'
          style='--top: {{ top }}; --left: {{ left }};'
        >
          <div class='hotspot-trigger1'>
            {% if section.settings.open_as == 'quickview' %}
              {% assign min = 100000000 %}
              {% assign max = 999999999 %}
              {% assign range = max | minus: min | plus: 1 %}
              {% assign random_offset = 'now' | date: '%N' | modulo: range %}
              {% assign random_number = min | plus: random_offset %}
              <xo-product-quick-view-trigger xo-modal-name='quick-view' xo-product-url='{{ shop.url }}/products/{{ product.handle }}/?section_id=quick-view-content'>
                {% if section.settings.dot_style == 'simple' %}
                  <div class='{% if section.settings.button_style =='dark' %}hotspot-trigger1__icon-dark {% else %} hotspot-trigger1__icon {% endif %}'>
                    {% render 'button', class: 'hotspot-trigger1__icon-button', style: 'light' %}
                  </div>
                {% elsif section.settings.dot_style == 'plus' %}
                  <div class='{% if section.settings.button_style =='light' %} hotspot-trigger1__plus-light {% else %} hotspot-trigger1__icon-plus {% endif %}'>
                    {% if section.settings.button_style == 'light' %}
                      {% render 'button', style: 'light', icon: 'plus', icon_size: '12', class: 'hotspot-trigger1__button-plus' %}
                    {% else %}
                      {% render 'button', style: 'light', icon: 'plus', icon_size: '12', class: 'hotspot-trigger1__button-plus' %}
                    {% endif %}
                  </div>
                {% elsif section.settings.dot_style == 'number' %}
                  <div class='{% if section.settings.button_style =='light' %} hotspot-trigger1__plus-light {% else %} hotspot-trigger1__icon-plus {% endif %}'>
                    {% render 'button', class: 'hotspot-trigger1__button-number', number: i, style: 'light' %}
                  </div>
                {% endif %}
              </xo-product-quick-view-trigger>
            {% else %}
              {% assign min = 100000000 %}
              {% assign max = 999999999 %}
              {% assign range = max | minus: min | plus: 1 %}
              {% assign random_offset = 'now' | date: '%N' | modulo: range %}
              {% assign random_number = min | plus: random_offset %}
              <xo-popover-trigger xo-name='hotspot-{{ random_number }}' xo-type='{{ section.settings.trigger_type }}' class='hotpot-trigger1__desktop'>
                {% if section.settings.dot_style == 'simple' %}
                  <div class='{% if section.settings.button_style =='dark' %} hotspot-trigger1__icon-dark {% else %} hotspot-trigger1__icon {% endif %}'></div>
                {% elsif section.settings.dot_style == 'plus' %}
                  <div class='{% if section.settings.button_style =='light' %} hotspot-trigger1__plus-light {% else %} hotspot-trigger1__icon-plus {% endif %}'>
                    {% if section.settings.button_style == 'light' %}
                      {% render 'icon', name: 'plus', icon_size: '12', color: '#000' %}
                    {% else %}
                      {% render 'icon', name: 'plus', icon_size: '12', color: '#fff' %}
                    {% endif %}
                  </div>
                {% elsif section.settings.dot_style == 'number' %}
                  <div class='{% if section.settings.button_style =='light' %} hotspot-trigger1__plus-light {% else %} hotspot-trigger1__icon-plus {% endif %}'>
                    <span>{{ i }}</span>
                  </div>
                {% endif %}
              </xo-popover-trigger>
              <xo-popover-trigger xo-name='hotspot2-{{ random_number }}' class='hotpot-trigger1__mobile'>
                {% if section.settings.dot_style == 'simple' %}
                  <div class='{% if section.settings.button_style =='dark' %} hotspot-trigger1__icon-dark {% else %} hotspot-trigger1__icon {% endif %}'></div>
                {% elsif section.settings.dot_style == 'plus' %}
                  <div class='{% if section.settings.button_style =='light' %} hotspot-trigger1__plus-light {% else %} hotspot-trigger1__icon-plus {% endif %}'>
                    {% if section.settings.button_style == 'light' %}
                      {% render 'icon', name: 'plus', icon_size: '12', color: '#000' %}
                    {% else %}
                      {% render 'icon', name: 'plus', icon_size: '12', color: '#fff' %}
                    {% endif %}
                  </div>
                {% elsif section.settings.dot_style == 'number' %}
                  <div class='{% if section.settings.button_style =='light' %} hotspot-trigger1__plus-light {% else %} hotspot-trigger1__icon-plus {% endif %}'>
                    <span>{{ i }}</span>
                  </div>
                {% endif %}
              </xo-popover-trigger>
              <xo-popover xo-name='hotspot-{{ random_number }}' xo-portal xo-placement='{{ placement | default: 'right-top'  }}'>
                <xo-product xo-product-id='{{ product.id }}' xo-section-id='{{section.id}}'>
                  <div class='hotspot-trigger1__content hotspot-trigger1__content--popup'>
                    <div xo-binding='img'>
                      <a href='{{ product.url }}'>
                        {% render 'product-image', product: product, show_secondary_image: true, media_aspect_ratio: aspect_ratio %}
                      </a>
                    </div>
                    <xo-product-liquid-static>
                      <script type='application/json'>
                        {
                          {% for variant in product.variants
                          %}
                            {{ variant.id}}: {
                              price: `{% render 'price', variant: variant, reverse: false %}`,
                              img: `<a href='{{ product.url }}'>{% render 'product-image',product: product, variant: variant, show_secondary_image: show_secondary_image, media_aspect_ratio:aspect_ratio %}</a>`
                            },
                          {% endfor %}
                        }
                      </script>
                    </xo-product-liquid-static>

                    <h1 class='hotspot-trigger1__product-title'>
                      {{ product.title }}
                    </h1>
                    {% if product.variants.size > 1 %}
                      {% for option in product.options_with_values %}
                        {% if option.name == 'Color' %}
                          <div class='hotspot-trigger1__variants hotspot-trigger1__variants--style6'>
                            {% render 'product-variant', option: option, style: 'color', modified: 'style6', product: product %}
                          </div>
                          {% break %}
                        {% endif %}
                      {% endfor %}
                    {% endif %}
                    <xo-product-will-change xo-unique-id='product-price-{{ product.id }}'>
                      {% render 'price', product: product, use_variant: true %}
                      {% if cart.taxes_included == true %}
                        <span>{{ 'products.product.price.include_tax' | t }}</span>
                      {% endif %}
                    </xo-product-will-change>
                  </div>
                  {% render 'product-data', product: product %}
                </xo-product>
              </xo-popover>
              <xo-popover xo-name='hotspot2-{{ random_number }}' xo-portal xo-placement='{{ placement | default: 'right-top'  }}'>
                <div class='hotspot-trigger1__content hotspot-trigger1__content--popup'>
                  <div xo-binding='img'>
                    <a href='{{ product.url }}'>
                      {% render 'product-image', product: product, show_secondary_image: true, media_aspect_ratio: aspect_ratio %}
                    </a>
                  </div>
                  <h1 class='hotspot-trigger1__product-title'>
                    {{ product.title }}
                  </h1>
                  {% if product.variants.size > 1 %}
                    {% for option in product.options_with_values %}
                      {% if option.name == 'Color' %}
                        <div class='hotspot-trigger1__variants hotspot-trigger1__variants--style6'>
                          {% render 'product-variant', option: option, style: 'color', modified: 'style6', product: product %}
                        </div>
                        {% break %}
                      {% endif %}
                    {% endfor %}
                  {% endif %}
                  <xo-product-will-change xo-unique-id='product-price-{{ product.id }}'>
                    {% render 'price', product: product, use_variant: true %}
                    {% if cart.taxes_included == true %}
                      <span>{{ 'products.product.price.include_tax' | t }}</span>
                    {% endif %}
                  </xo-product-will-change>
                </div>
              </xo-popover>
            {% endif %}
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</xo-product>
