{% if related_products == true %}
  {% assign hover_enabled = block.settings.show_related_products_title_on_hover %}
{% else %}
  {% assign hover_enabled = settings.thumbnail_hover_enabled %}
{% endif %}

{% if type == 'block' %}
  {% assign object = block %}
{% else %}
  {% assign object = section %}
{% endif %}

{% assign secondaryImage = product.media[1] %}

{% assign collection_handles = product.collections | map: 'handle' %}
{% if product.featured_media.preview_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
  {% assign alt_text = product.title %}
{% else %}
  {% assign alt_text = product.featured_media.preview_image.alt %}
{% endif %}

{% if type == 'block' %}
  {% assign image_crop = block.settings.image_crop %}
{% else %}
  {% assign image_crop = section.settings.image_crop %}
{% endif %}

{% if align_height == true %}
  {% style %}
    .product-{{ product.id }}.thumbnail .image__container img,
    .product-{{ product.id }}.thumbnail .product-thumbnail__video .plyr {
      max-width: 100%;
      width: {{ height }}px;
      margin: 0 auto;
    }

    .shopify-model-viewer-ui model-viewer {
      --progress-bar-height: 2px;
      --progress-bar-color: {{ settings.regular_color }};
    }
  {% endstyle %}
{% endif %}

{% liquid

  assign active_discount = true

  assign empty_array = "" | split: ""
  assign dormant_discounts = shop.metafields.app--168074346497.dormant_discounts.value | default: empty_array
  assign target_discount_id = product.metafields.app--168074346497.applied_discount_id.value
  for dormant_discount in dormant_discounts
    if dormant_discount == target_discount_id
      assign active_discount = false
    endif
  endfor

  assign product_price = product.price
  assign product_compare_at_price_max = product.compare_at_price_max
  assign product_compare_at_price = product.compare_at_price

  if active_discount
    assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
    
    if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank
      assign product_compare_at_price = product.price
    endif

    if product_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank
      assign product_compare_at_price_max = product.price_max
    endif
  endif
%}

<div class="
  {%
    render 'column-width',
    value: products_per_row
  %}
  medium-down--one-half
  {% if mobile_products_per_row == '1' %}
    small-down--one-whole
  {% else %}
    small-down--one-half
  {% endif %}
  column
  {% if settings.enable_quickshop %}
    quick-shop--true
    quick-shop--closed
    product-{{ product.id }} js-product_section
  {% endif %}
  {% if settings.stickers_enabled %}
    has-thumbnail-sticker
  {% endif %}
  {% if product.media[1] != blank and settings.show_secondary_image == true %}
    has-secondary-image-swap
  {% endif %}
  thumbnail
  product__thumbnail
  product__grid-item
  thumbnail__hover-overlay--{{ hover_enabled }}
  has-padding-bottom"
  {% if section.settings.pagination_type != 'basic_pagination' %}
    data-load-more--grid-item
  {% endif %}>
  <div class="product-wrap">

      <div class="product-image__wrapper">
        <div class="image__container product__imageContainer">
          <a href="{{ product.url }}">
            {% if settings.stickers_enabled %}
              {%
                render 'product-thumbnail__sticker',
                product: product,
                context: 'product',
                collection_handles: collection_handles
              %}
            {% endif %}

            {% comment %} Primary image {% endcomment %}
            {%
              render 'image-element',
              image: product.featured_media.preview_image,
              alt: alt_text,
              object_fit: align_height,
              max_height: height
            %}

            {% comment %} Secondary image {% endcomment %}
            {% if product.media[1] != blank and settings.show_secondary_image == true %}
              {% if product.media[1].media_type == 'external_video' %}
                <div class="product-thumbnail__video secondary swap--visible video-on-hover">
                  <div data-youtube-video>
                    {{ product.media[1] | external_video_tag }}
                  </div>
                </div>
              {% elsif product.media[1].media_type == 'video' %}
                <div class="product-thumbnail__video secondary swap--visible video-on-hover" data-html5-video>
                  {{ product.media[1] | video_tag: controls: false }}
                </div>
              {% else %}
                {%
                  render 'image-element',
                  image: product.media[1],
                  alt: alt_text,
                  object_fit: align_height,
                  max_height: height,
                  additional_classes: 'secondary swap--visible'
                %}
              {% endif %}
            {% endif %}
          </a>
        </div>

        {% if hover_enabled or settings.enable_quickshop %}
          <div class="thumbnail-overlay__container">
            <a class="hidden-product-link" href="{{ product.url }}">{{ product.title | escape }}</a>

            {% if hover_enabled %}
              <div class="quick-shop__info animated fadeInDown">
                <div class="thumbnail-overlay">
                  <div class="info text-align-center">
                    {% if settings.display_vendor %}
                      <span class="product-thumbnail__vendor">{{ product.vendor }}</span>
                    {% endif %}

                    <p class="product-thumbnail__title">{{ product.title | escape }}</p>

                    {% if collection_handles contains 'coming-soon' %}
                      <span>{{ 'collections.general.coming_soon' | t }}</span>
                    {% else %}
                      <span class="product-thumbnail__price price {% if product_compare_at_price_max > product_price %}sale{% endif %}">
                        {% if product.price_varies %}
                          <small><em>{{ 'products.general.from' | t }}</em></small>
                        {% endif %}
                        {% if product_price > 0 %}
                          <span class="money">
                            {%
                              render 'price-element',
                              price: product_price
                            %}
                          </span>
                        {% else %}
                          {{ settings.free_price_text }}
                        {% endif %}
                        {%- assign variant = product.selected_or_first_available_variant -%}
                        
                        {% if product_compare_at_price_max > product_price %}
                          <span class="product-thumbnail__was-price compare-at-price">
                            <span class="money">
                              {%
                                render 'price-element',
                                price: product_compare_at_price_max
                              %}
                            </span>
                          </span>
                        {% endif %}
                      </span>
                      {% if settings.select_first_available_variant %}
                        {%- assign variant_for_unit_price = product.variants | sort: 'price' | first -%}
                        {%
                          render 'unit-price',
                          item: variant_for_unit_price,
                          class: 'product-thumbnail__unit-price'
                        %}
                      {% endif %}
                    {% endif %}
                  </div>
                </div>
              </div>
            {% endif %}

            {% if settings.enable_quickshop %}
              {%
                render 'product-thumbnail__quick-shop-button',
                product: product
              %}
            {% endif %}

            {% if hover_enabled %}
              {% if settings.enable_shopify_collection_badges %}

                {% comment %}<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>{% endcomment %}

                {% comment %}Judge.Me preview stars{% endcomment %}
                {% unless product.metafields.judgeme.badge contains "data-number-of-reviews='0'" %}
                  <div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge text-align-{{ settings.thumbnail_text_alignment }}' data-id='{{ product.id }}'
                  data-template='{% if concierge_install == true or concierge_install == nil %}{{ template }}{% else %}manual-installation{% endif %}'
                  data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}'>
                    {{ product.metafields.judgeme.badge }}
                  </div>
                {% endunless %}

              {% endif %}
            {% endif %}

          </div>
        {% endif %}

      </div>

      <div class="thumbnail__caption text-align-{{ settings.thumbnail_text_alignment }}">
        {%
          render 'product-thumbnail__product-info',
          product: product,
          collection_handles: collection_handles
        %}
      </div>
    </div>

  {%
    render 'product-thumbnail__swatch',
    product: product
  %}

  {% if hover_enabled == false %}
    {% if settings.enable_shopify_collection_badges %}

      {% comment %}<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>{% endcomment %}

      {% comment %}Judge.Me preview stars{% endcomment %}
      {% unless product.metafields.judgeme.badge contains "data-number-of-reviews='0'" %}
        <div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge text-align-{{ settings.thumbnail_text_alignment }}' data-id='{{ product.id }}'
        data-template='{% if concierge_install == true or concierge_install == nil %}{{ template }}{% else %}manual-installation{% endif %}'
        data-auto-install='{% if auto_install != nil %}{{ auto_install }}{% else %}false{% endif %}'>
          {{ product.metafields.judgeme.badge }}
        </div>
      {% endunless %}

    {% endif %}
  {% endif %}
</div>