{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

{%assign thumbSize = product-thumb%}
{% case thumbSize %}
  {% when 'full' %}
    {%assign size = "fullSpan"%}
    {%assign img_size = "master"%}
  {% when 'half' %}
    {%assign size = "half"%}
    {%assign img_size = "600x600"%}
  {% when 'thirds' %}
    {%assign size = "oneThird"%}
    {%assign img_size = "450X450"%}

  {% when 'quarters' %}
    {%assign size = "oneQuarter"%}
    {%assign img_size = "450X450"%}

  {% when 'fifth' %}
      {%assign size = "fifth"%}
      {%assign img_size = "320X320"%}

  {% when 'sixth' %}
      {%assign size = "sixth"%}
	  {%assign img_size = "250X250"%}
  {% when 'grid-one-seven' %}
      {%assign size = "grid-one-seven"%}
	  {%assign img_size = "250X250"%}
  {% when 'grid-one-eight' %}
      {%assign size = "grid-one-eight"%}
	  {%assign img_size = "250X250"%}
  {% when 'mixGrid' %}
    {%capture size%}
      {%cycle 'half','half','oneThird','oneThird','oneThird'%}
    {%endcapture%}
    {%assign img_size = "600x600"%}
  {% when 'mixGridTwo' %}
    {%capture size%}
      {%cycle 'oneThird','oneThird','oneThird', 'half','half'%}
    {%endcapture%}
     {%assign img_size = "600x600"%}
{%endcase%}

{%assign titleTag = 'h3' %}
{% if template == 'collection' %}
	{%assign titleTag = 'h2' %}
	{%assign size = settings.collection_product_perline %}
{% endif %}
{% assign show_collection_in_link_new = true %}
{% if show_collection_in_link %}
	{% assign show_collection_in_link = show_collection_in %}
{% endif %}
<li id="product-{{ forloop.index | plus:paginate.current_offset }}" class="prodThumb {{ size }} flexItem">
  <a href="{% if show_collection_in_link %}{{ product.url }}{% else %}{{ product.url | within: collection }}{% endif %}">
    {%assign saletext =  'products.product.on_sale' | t %}

    {% if on_sale %}
    	{% if settings.tag_option == 'percentage' %}
    		<span class="tag">-{% if product.variants.first.price == 0 %}100{%else%}{{ product.compare_at_price | minus: product.price | times: 10000.0 | divided_by: product.compare_at_price | money_without_currency | times: 1 | slice: 0, 2 | remove: '.0' | remove: '.' }}{%endif%}%</span>
    	{%endif%}
    	{%if settings.tag_option == 'amount' %}
    		<span class="tag">-{{ product.variants.first.compare_at_price | minus: product.variants.first.price | times: 1.0 | money}}</span>
    	{%endif%}
    	{% if settings.tag_option == 'texttag' and saletext != '' %}
    		<span class="tag">{{ 'products.product.on_sale' | t}}</span>
    	{%endif%}
    	
      
    {%endif%}
    {% if sold_out %}
      <span class="tag">{{ 'products.product.sold_out' | t}}</span>
    {% endif %}
      
      <div class="imgWrap gridJustify centerColumns {%if product.images.size > 1 and settings.collection_enable_hover_image == true %}twoImg{%endif%}">
       	  {% if settings.image_loading_type == 'lazy' %}
          	<img data-sizes="auto" class="lazyloadimage lazyload blur-up" src="{{product.images.first | img_url:'100x100'}}" data-src="{{product.images.first | img_url:img_size}}" alt="{{product.images.first.alt}}">
          {% else %}
        	<img src="{{product.images.first | img_url:img_size}}" alt="{{product.images.first.alt}}">
          {% endif %}
        	{%if product.images.size > 1 and settings.collection_enable_hover_image == true %}
          	<img class="second" src="{{product.images[1] | img_url: img_size}}" alt="{{product.images[1].alt}}">
          {%endif%} 
      </div>
    
    <div class="title gridJustify">
            <span class="{% if template == 'collection' or template == 'index' or template == 'search' %}col_product_text_color{% else %}product_text_color{% endif %}">
              <{{titleTag}}>{{product.title}}{{img_url}}</{{titleTag}}>
              {% if settings.product_review_list_enable %}
              	{%include 'review_listing' %}
			  {% endif %}
</span>
      <span class="{% if template == 'collection' or template == 'index' or template == 'search' %}col_product_list_price{% else %}product_list_price{% endif %}">
        {% if on_sale %}
          {% if product.price_varies %}
            {% assign price = product.price | money %}
              {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            {{ product.price | money }} <strike>{{ product.compare_at_price | money }}</strike> 
          {% endif %}
        {% else %}
          {% if product.price_varies %}
            {% assign price = product.price | money %}
            {{ 'products.general.from_text_html' | t: price: price }} 
          {% else %}
            {{ product.price | money }}
          {% endif %}
        {% endif %}
      </span>
    </div>
  </a>
</li>