{% liquid
  for tag in product.tags
    if tag contains 'newlabel'
      assign productTag = 'collections.general.newlabel' | t
    elsif tag contains 'partylabel'
     assign productTag = 'collections.general.partylabel' | t
    elsif tag contains 'duurzaamlabel'
      assign productTag = 'collections.general.duurzaamlabel' | t
    elsif tag contains 'giftlabel'
      assign productTag = 'collections.general.giftlabel' | t
    elsif tag contains 'cominglabel'
      assign productTag = 'collections.general.cominglabel' | t
    elsif tag contains 'preorder'
      assign productTag = 'collections.general.pre_order' | t
    elsif tag contains 'label1'
      assign productTag = 'collections.general.label1' | t
    elsif tag contains 'label2'
      assign productTag = 'collections.general.label2' | t
    elsif tag contains 'label3'
      assign productTag = 'collections.general.label3' | t
    endif
  endfor
%}


{% 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' %}" itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
{% 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' %}" itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
{% endif %}

  {% 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 %}

    {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
    {% unless the_snippet_fave_icon contains 'Liquid error' %}
    {{ the_snippet_fave_icon }}
    {% endunless %}
  <a href="{{ product.url | within: collection }}" itemprop="url">
    <div class="relative product_image">

      {% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
          <div class="sale_banner">{{ 'collections.general.sale' | t }}</div>
      {% endif %}

      {% render 'discount-percentage', product: product %}

      <div class="product_container swap-{{ settings.collection_secondary_image }}">
        <div class="image__container" style="{% if settings.align_height %} max-width: {{ product_set_width }}px; {% else %} max-width: {{- product.featured_image.width -}}px; {% 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.last != blank %}{{- product.images.last.width -}}px{% else %}{{- product.featured_image.width -}}px{% endif %}; ">
              <img src="{% if product.images.last != blank %}{{ product.images.last | product_img_url: '900x' }}{% else %}{{ product.featured_image | product_img_url: '900x' }}{% endif %}"
              class="secondary lazyload"
              alt="{{ alt_text | escape }}"
              />
            </div>
          {% endif %}
          {% if settings.quick_shop_enabled %}
            <span data-fancybox-href="#product-{{ product.id }}" class="quick_shop ss-icon" data-gallery="product-{{ product.id }}-gallery">
              <span class="icon-plus">QUICK VIEW</span>
            </span>
          {% endif %}
        </div>

      </div>
    </div>

    <div class="info">
      <span class="title" itemprop="name">
        {{ product.title }}</span>
      {% if settings.display_vendor_collection %}
        <div class="vendor">
          <span itemprop="brand">{{ product.vendor }}</span>
        </div>
      {% endif %}

      {% if settings.enable_shopify_collection_badges %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endif %}

        <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="price" content="{{ product.price_min | money_without_currency | remove: "," }}" />
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
          <meta itemprop="seller" content="{{ shop.name | escape }}" />
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          <meta itemprop="itemCondition" content="New" />

          {% 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>
            <span class="money">{{ product.price_min | money }}</span>
          {% endif %}
        </span>

    </div>

    {% if productTag != blank %}
      <div class="new_banner">{{ productTag }}</div>
    {% endif %}
  </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 product-{{ product.id }} product_section {% if product.images.size > 1 %} thumbnail_position--{{settings.thumbnail_position}} {% endif %} product_slideshow_animation--{{settings.product_slideshow_animation}}"
       data-thumbnail="{{settings.thumbnail_position}}"
       data-slideshow-animation="{{settings.product_slideshow_animation}}"
       data-slideshow-speed="{{settings.slideshow_speed}}">
    <div class="container section" style="width: inherit">

      <div class="eight columns" style="padding-left: 15px">
        {% include 'product-images' with 'modal' %}
      </div>

      <div class="six columns">
        <h3>{{ product.title }}</h3>
        {% if settings.display_vendor_collection %}
          <p class="vendor">
            <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% assign variant = product.selected_or_first_available_variant %}

        {% unless product.tags contains 'coming-soon' %}
          <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' %}
        {% endunless %}

        {% if settings.product_description_position == "top" %}
          {% if settings.description_words == "none" %}
            {{ product.description | split: '<!-- split -->' | first }}

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

            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
          {% endif %}
          <hr />
        {% endif %}

        {% unless product.tags 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 }}

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

            <a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>
{% endif %}