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

  Usage:
  {% render 'hotspot-style-2' %}
{%- endcomment -%}









{% assign featured_media = product.selected_or_first_available_variant.featured_media %}
{% assign aspect_ratio = settings.product_card_aspect_ratio %}
<xo-animate xo-cascade class='hotspot-style2'>
  <div class='hotspot-style2__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 = section.settings[top__] %}
    {% assign left__ = 'left_' | append: i %}
    {% assign left = section.settings[left__] %}
    {% assign placement__ = 'placement_' | append: i %}
    {% assign placement = section.settings[placement__] %}
    {% assign product__ = 'product_' | append: i %}
    {% assign product = section.settings[product__] %}
    {% if product != blank %}
      {%- assign prod = all_products[product] -%}
      {% assign index = index | plus: 1 %}
      <div
        class='hotspot-style2__point'
        style='--top: {{ top }}; --left: {{ left }};'
      >
        <div class='hotspot-trigger2'>
          {% 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-trigger2__icon-dark {% elsif section.settings.button_style == 'color' %} hotspot-trigger2__icon-color {% else %} hotspot-trigger2__icon {% endif %}'
                ></div>
              {% elsif section.settings.dot_style == 'plus' %}
                <div class='{% if section.settings.button_style == 'light' %} hotspot-trigger2__plus-light {% elsif section.settings.button_style == 'color' %} hotspot-trigger2__plus-color {% else %} hotspot-trigger2__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-trigger2__plus-light {% elsif section.settings.button_style == 'color' %} hotspot-trigger2__plus-color  {% else %} hotspot-trigger2__icon-plus {% endif %}'>
                  <span>{{ i }}</span>
                </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-trigger2__icon-dark {% elsif section.settings.button_style == 'color' %} hotspot-trigger2__icon-color {% else %} hotspot-trigger2__icon {% endif %}'
                ></div>
              {% elsif section.settings.dot_style == 'plus' %}
                <div class='{% if section.settings.button_style == 'light' %} hotspot-trigger2__plus-light {% elsif section.settings.button_style == 'color' %} hotspot-trigger2__plus-color {% else %} hotspot-trigger2__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-trigger2__plus-light {% elsif section.settings.button_style == 'color' %} hotspot-trigger2__plus-color  {% else %} hotspot-trigger2__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-trigger2__icon-dark {% else %} hotspot-trigger2__icon {% endif %}'></div>
              {% elsif section.settings.dot_style == 'plus' %}
                <div class='{% if section.settings.button_style =='light' %} hotspot-trigger2__plus-light {% else %} hotspot-trigger2__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-trigger2__plus-light {% else %} hotspot-trigger2__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-trigger2__content hotspot-trigger2__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-trigger2__product-title'>
                    {{ product.title }}
                  </h1>
                  {% if product.variants.size > 1 %}
                    {% for option in product.options_with_values %}
                      {% if option.name == 'Color' %}
                        <div class='hotspot-trigger2__variants hotspot-trigger2__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-trigger2__content hotspot-trigger2__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-trigger2__product-title'>
                  {{ product.title }}
                </h1>
                {% if product.variants.size > 1 %}
                  {% for option in product.options_with_values %}
                    {% if option.name == 'Color' %}
                      <div class='hotspot-trigger2__variants hotspot-trigger2__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 %}
</xo-animate>
