{% 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 show_collection_in_link_new = true %}
{% if show_collection_in_link %}
	{% assign show_collection_in_link = show_collection_in %}
{% endif %}
<li class="prodThumb 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:'350x350'}}" alt="{{product.images.first.alt}}">
          {% else %}
        	<img src="{{product.images.first | img_url:'350x350'}}" 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: '350x350'}}" alt="{{product.images[1].alt}}">
          {%endif%} 
      </div>
      <div class="title gridJustify">
      <span  class="{% if template == 'collection' or template == 'index' %}col_product_text_color{% else %}product_text_color{% endif %}">
        <h3>{{product.title}}{{img_url}}</h3>
        {% if settings.product_review_list_enable %}
             {%include 'review_listing' %}
              {% endif %}
        </span>
      <span class="{% if template == 'collection' or template == 'index' %}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>