<div class="wrap-grid-item">
  <div class="row">
    
    {%- assign _class = 'col-lg-4 col-md-6 col-sm-12' -%}

    {% unless block.settings.collection == blank or collection.products_count == 0 %}
      {% for product in collection.products limit: _limit %}
        <div class="{{ _class }}">
          {% include 'product-item' %}
        </div>	
      {% endfor %}

    {% else %}
      {{ emptyProduct05 }}
    {% endunless %}

  </div>
</div>

<div class="big-grid-item">
  <div class="big-grid-item-{{ block.id }} big-grid-item product-wrapper">
    
    {%- assign product = all_products[_product] -%}

    {% if text_align == blank %}
      {% assign text_align = settings.text_align_product_item %}
    {% endif %}

    <div class="product-head">

        <div class="special-product-label">
          <span class="spl-1"><strong>{{ 'products.big_product.text_special' | t }}</strong>{{ 'products.big_product.text_offer' | t }}</span>

          {% if product.variants.first.price < product.variants.first.compare_at_price %}
            <span class="spl-2">
              <span class="spl-text-2">
                <span class="text">{{ 'products.big_product.text_save' | t }}</span>
                {% assign percent_off = product.variants.first.price | times:100.00 | divided_by: product.variants.first.compare_at_price | round %}
                <span class="percent">{{ 100 | minus : percent_off }}%</span>
              </span>
            </span>
          {% endif %}

        </div>

        <div class="product-image">
          
          {% if settings.show_product_vendor %}<div class="product-vendor">{{ product.vendor | link_to_vendor }}</div>{% endif %}

          <h5 class="product-name"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h5>
          
          {% capture _image_html %}{{ product.featured_image | product_img_url: '450x' }}{% endcapture %}
          {% capture number_of_images %}{{ product.images | size }}{% endcapture %}
          {% assign number_images = number_of_images | plus:0 %}
          
          {% if number_images > 1 %}
            <div class="image">
              <a href="{{ product.url }}"{% if _lazyload %} class="lazyload waiting"{% endif %}>
                <img class="featured-image{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{{ _image_html }}" alt="{{ product.title | escape }}" />
              </a>
            </div>

            <div class="thumbs-list">
              {% for image in product.images limit: 5 %}
              <div class="thumb-image{% if _lazyload %} lazyload waiting{% endif %}">
                <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{{ image.src | product_img_url: '70x' }}" data-swatch-image={{ image.src | product_img_url: '370x' }} alt="{{ product.title | escape }}" alt="{{ product.title | escape }}" />
              </div>
              {% endfor %}
            </div>
          
          	<script type="text/javascript">
              $('.big-grid-item-{{ block.id }} .thumb-image > img').on('click', function(e){
                e.stopPropagation();
                var imgUrl = $(this).data("swatch-image"),
                    parent = $(this).parents('.product-wrapper'),
                    imgElem = parent.find('.product-image img.featured-image');
                imgElem.parents('.product-image').addClass('img-loading');
                imgElem.attr('src', imgUrl)
                var fakeImg = new Image();
                fakeImg.src = imgUrl;
                fakeImg.onload = function(event){
                    imgElem.parents('.product-image').removeClass('img-loading');
                };
                fakeImg.onerror = function() {
                    //Code for error loading
                };
              });
            </script>

          {% else %}
            <div class="image">
              <a href="{{ product.url }}"{% if _lazyload %} class="lazyload waiting"{% endif %}>
                <img {% if _lazyload %}class="lazyload" data-{% endif %}src="{% if product.images.size >= 1 %}{{ _image_html }}{% else %}{{ 'default-image.jpg' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" style="height:370px;" />
              </a>
            </div>

          {% endif %}
          
        </div>

      </div>

      <div class="product-content">
        <div class="pc-inner"> 

          <div class="price-cart-wrapper">
            {% include 'product-price' %}

            <div class="product-add-cart">
              {% unless product.template_suffix == 'redirect' %}

                {% if settings.disable_ajax_cart %}
                  <a href="{{ product.url | within: collection }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>

                {% else %} 
                  {% if product.variants.size > 1 %}
                  <a href="{{ product.url | within: collection }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>

                  {% else %}
                    {% if product.available %}
                      <form action="/cart/add" method="post" enctype="multipart/form-data">
                        <a href="javascript:void(0)" class="btn-add-cart add-to-cart" title="{{ 'products.product.add_to_cart' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>
                        <select class="d-none" name="id">
                          {% for variant in product.variants %}
                            <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
                          {% endfor %}
                        </select>
                      </form>
                    {% endif %}

                  {% endif %}

                {% endif %}

              {% else %}
                {% assign meta_redirect = product.metafields.c_f %}
                {% assign key = 'redirect_url' %}

                {% unless meta_redirect.redirect_url == blank %}
                  <a target="_blank" rel="noopener" href="{{ meta_redirect.redirect_url }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-add-to-cart"></span></a>
                {% endunless %}

              {% endunless %}
            </div>
          </div>

        </div>
      </div>

  </div>
</div>