{% if sidebar %}
  <div class="{% if products_per_row == 2 %}six columns {% cycle collection_group_thumb: 'alpha', 'omega' %}{% elsif products_per_row == 3 %}four columns {% cycle collection_group_thumb: 'alpha', '', 'omega' %}{% else %}three columns {% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}{% endif %} thumbnail {% cycle collection_group_mobile: 'even', 'odd' %} swap-{{ settings.collection_secondary_image }}" data-initial-width="{% if products_per_row == 2 %}eight{% elsif products_per_row == 3 %}one-third{% elsif products_per_row == 4 %}four{% endif %}" data-sidebar-width="{% if products_per_row == 2 %}six{% elsif products_per_row == 3 %}four{% elsif products_per_row == 4 %}three{% endif %}">
{% else %}
  <div class="{% if products_per_row == 2 %}eight columns {% cycle collection_group_thumb: 'alpha', 'omega' %}{% elsif products_per_row == 3 %}one-third column {% cycle collection_group_thumb: 'alpha', '', 'omega' %}{% else %}four columns {% cycle collection_group_thumb: 'alpha', '', '', 'omega' %}{% endif %} thumbnail {% cycle collection_group_mobile: 'even', 'odd' %} swap-{{ settings.collection_secondary_image }}" data-initial-width="{% if products_per_row == 2 %}eight{% elsif products_per_row == 3 %}one-third{% elsif products_per_row == 4 %}four{% endif %}" data-sidebar-width="{% if products_per_row == 2 %}six{% elsif products_per_row == 3 %}four{% elsif products_per_row == 4 %}three{% endif %}">
{% endif %}

  {% assign collection_handles = product.collections | map: 'handle' %}

  {% if product.featured_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
    {% assign alt_text = product.title %}
  {% else %}
    {% assign alt_text = product.featured_image.alt %}
  {% endif %}

  {% if settings.align_height %}
    {% assign collection_height = settings.collection_height | plus: 0 %}
    {% assign product_aspect_ratio = product.featured_image.aspect_ratio | plus: 0 %}
    {% assign product_set_width = product_aspect_ratio | times: collection_height %}

    {% if product.featured_image.width >= product.featured_image.height %}
      {% assign align_height_value = 'width: 100%; height: auto;' %}
    {% else %}
      {% assign align_height_value = 'width: 100%;' %}
    {% endif %}

  {% endif %}

  <a href="{{ product.url | within: collection }}">
    <div class="relative product_image">

      <div class="product_container">
        <div class="image__container" style="{% if settings.align_height %} max-width: {{ product_set_width }}px; {% else %} max-width: {{- product.featured_image.width -}}px;{% endif %}">
          {% if settings.thumbnail_border_enabled %}
            <div class="image__border">
          {% endif %}
            <img  src="{{ product.featured_image | product_img_url: '300x' }}"
                  alt="{{ alt_text | escape }}"
                  class="lazyload lazyload--fade-in"
                  style="{{ align_height_value }} max-width: {{- product.featured_image.width -}}px;"
                  data-sizes="auto"
                  data-src="{{ product.featured_image | product_img_url: '2048x' }}"
                  data-srcset=" {{ product.featured_image | product_img_url: '2048x' }} 2048w,
                                {{ product.featured_image | product_img_url: '1600x' }} 1600w,
                                {{ product.featured_image | product_img_url: '1200x' }} 1200w,
                                {{ product.featured_image | product_img_url: '1000x' }} 1000w,
                                {{ product.featured_image | product_img_url: '800x' }} 800w,
                                {{ product.featured_image | product_img_url: '600x' }} 600w,
                                {{ product.featured_image | product_img_url: '400x' }} 400w"
                />
            {% if settings.collection_secondary_image != blank %}
              <div class="image__container" style="max-width: {% if product.images[1] != blank %}{{- product.images[1].width -}}px{% else %}{{- product.featured_image.width -}}px{% endif %}; ">
                <img src="{% if product.images[1] != blank %}{{ product.images[1] | product_img_url: '900x' }}{% else %}{{ product.featured_image | product_img_url: '900x' }}{% endif %}"
                class="secondary lazyload"
                alt="{{ alt_text | escape }}"
                />
              </div>
            {% endif %}
          {% if settings.thumbnail_border_enabled %}
            </div>
          {% endif %}
        </div>
      </div>

      <div class="quick_shop_container">
        {% if settings.quick_shop_enabled %}
          <span data-fancybox-href="#product-{{ product.id }}" class="quick_shop action_button" data-gallery="product-{{ product.id }}-gallery">
            {{ 'collections.general.quick_shop' | t }}
          </span>
        {% endif %}
      </div>
    </div>

    <div class="info">
      <span class="title">{{ product.title }}</span>
      <!-- Start of Judge.me code -->
      <div style='{{ jm_style }};font-size: 14px' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
        {{ product.metafields.judgeme.badge }}
      </div>
      <!-- End of Judge.me code -->
      {% if settings.enable_shopify_collection_badges %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endif %}

      {% if settings.display_vendor_collection %}
        <span class="vendor">{{ product.vendor }}</span>
      {% endif %}

      {% if collection_handles contains 'coming-soon' %}
        <p class="price">{{ 'collections.general.coming_soon' | t }}</p>
      {% else %}
        {%- liquid
          assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
          assign product_price_min = product_price
          assign product_compare_at_price_max = product.compare_at_price_max

          if product.metafields.app--168074346497.discount_percentage.value > 0.01
            assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value

            assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
            assign product_price_min = product_price

            assign product_compare_at_price_max = product.price_max

            if product.compare_at_price_max > product_compare_at_price_max
              assign product_compare_at_price_max = product.compare_at_price_max
            endif
          endif

          if product_price < product.price and product_compare_at_price_max == blank
            assign product_compare_at_price_max = product.price_max
          endif
        -%}
        <p class="price {% if product_compare_at_price_max > product_price %}sale{% endif %}">
          {% if product.available %}
            {% if product.price_varies and product_price_min > 0 %}
              <small><em>{{ 'products.general.from' | t }}</em></small>
            {% endif %}
            {% if product_price_min > 0 %}
              <span class="money">{{ product_price_min | money }}</span>
            {% else %}
              {{ settings.free_price_text }}
            {% endif %}
            {% if product_compare_at_price_max > product_price %}
              <span class="was_price">
                <span class="money">{{ product_compare_at_price_max | money }}</span>
              </span>
            {% endif %}
          {% else %}
            <span class="sold_out">{{ 'products.product.sold_out' | t }}</span>
          {% endif %}
        </p>
      {% endif %}

    </div>
    {% include 'product-thumbnail__sticker' %}
  </a>
  {% include 'collection-swatch' %}
</div>

{% if settings.quick_shop_enabled %}
  {% if product.description contains "#tab1" %}
    {% assign tabs = true %}
  {% else %}
    {% assign tabs = false %}
  {% endif %}

  <div id="product-{{ product.id }}" class="modal quick-shop-modal product-{{ product.id }}">
    <div class="container section" style="width: inherit">
      <div class="eight columns modal_image flex-active-slide">
        {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
        <img  src="{{ featured_image | product_img_url: '580x', scale: 2 }}"
              class="lazyload lazyload--fade-in"
              alt="{{ alt_text | escape }}" />
      </div>
      <div class="six columns">
        <h3>{{ product.title }}</h3>
        {% if settings.enable_shopify_collection_badges %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {% endif %}
        {% if settings.display_vendor_collection %}
          <p class="vendor">
            <span>{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% assign variant = product.selected_or_first_available_variant %}

        {% if collection_handles contains 'coming-soon' %}
          <p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
        {% else %}
          <p class="modal_price">
            <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
            <span class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
              <span class="current_price {% if product.available == false %}hidden{% endif %}">
                {% if variant.price > 0 %}
                  <span class="money">{{ variant.price | money }}</span>
                {% else %}
                  {{ settings.free_price_text }}
                {% endif %}
              </span>
            </span>
            <span class="was_price">
            {% if variant.price < variant.compare_at_price and variant.available %}
              <span class="money">{{ variant.compare_at_price | money }}</span>
            {% endif %}
            </span>
          </p>

          {% include 'product-notify-me' %}
        {% endif %}

        {% if settings.product_description_position == "top" %}
          {% if settings.description_words == "none" %}
            {{ product.description | split: '<!-- split -->' | first }}
          {% else %}
            {% if tabs %}
              {{ product.description | split: '<!-- split -->' | first }}
            {% else %}
              <p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
            {% endif %}
          {% endif %}
          <p>
            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }}">{{ 'collections.general.view_product_details_html' | t }}</a>
          </p>
          <hr />
        {% endif %}

        {% unless collection_handles contains 'coming-soon' %}
          {% include 'product-form', show_payment_button_quickshop: settings.show_payment_button %}
        {% endunless %}

        {% if settings.product_description_position == "bottom" %}
          <hr />
          {% if settings.description_words == "none" %}
            {{ product.description | split: '<!-- split -->' | first }}
          {% else %}
            {% if tabs %}
              {{ product.description | split: '<!-- split -->' | first }}
            {% else %}
              <p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
            {% endif %}
          {% endif %}
          <p>
            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }}">{{ 'collections.general.view_product_details_html' | t }}</a>
          </p>
        {% endif %}
      </div>
    </div>
  </div>
{% endif %}