{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <a href="{{ product.url | within: collection }}" class="pro_img_link">
        {% comment %} <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};" data-image-loading-animation> {% endcomment %}
        <div style="padding-top: 100%" data-image-loading-animation>
          <img id="{{ img_id }}"
               class="grid-view-item__image lazyload image-{{product.id}} first_img"
               alt="{{ preview_image.alt }}"
               {% include 'img-one-pixel' %}
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ preview_image.aspect_ratio }}"
               data-sizes="auto"
               width="{{ preview_image.width }}"               
               height="auto"
               data-image>
          {% if product.images[1] != blank %}
          <img id="{{ img_id }}"
               class="grid-view-item__image lazyload second_img image2-{{product.id}}"
               alt="{{ product.images[1].alt | escape }}"
               {% include 'img-one-pixel' %}
               data-src="{{ product.images[1] | img_url: 'master' }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ product.images[1].aspect_ratio }}"
               width="{{ product.images[1].width }}"
               height="{{ product.images[1].height }}"
               data-sizes="auto"
               data-image>
          {% endif %}
        </div>
      </a>
    </div>
    {% if product.tags contains 'sale' %}
    <div class="sale-label"><p>Sale</p></div>
    {% endif %}
    {% if product.available == false %}
    <div class="sold-out">
      <span>{{ 'products.product.sold_out' | t }}</span>
    </div>
    {% endif %}
    {% if product.tags contains 'new' %}
    <div class="new-label"><p>New</p></div>
    {% endif %}
    <div class="quick-view-button"><a class="quick-view" data-handle="{{ product.handle }}" href="javascript:void(0);"><i class="fa fa-eye" aria-hidden="true"></i></a></div>


  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="product_short_details">
    <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">
      <a href="{{ product.url | within: collection }}" class="product__title_link">{{ product.title }}</a>
    </div>

    {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

    {% if section.settings.swatch_image %}
    <form method="post" action="/cart/add" class="{% if section.settings.show_variant == blank %}add_btn{% endif %}" >
      <div class="product-form__controls-group">
        {% unless product.has_only_default_variant %}
        {% for option in product.options_with_values %}
        <div class="selector-wrapper js product-form__item {{ option.name }}">
          <div class="swatch_item">
            {% for value in option.values limit: 6 %}
            {% if option.name contains "Color" %}
            {% for variant in product.variants %}
            {%- assign display = "block" -%}
            {% if variant.image and variant.title contains value%}
            {%- assign img = variant.image | img_url: "640x" -%}
            {%- assign imgswatch = variant.image | img_url: "70x" -%}
            {%- assign display = "none" -%}
            {% endif %}
            {% endfor %}

            {% if option.name contains "Color" %}
            <span onclick="colorSwatchHandler('{{value}}');"  data-bg="{{ imgswatch }}" style="background-size: cover; background-image: url({{img}});" data-pro-org-img="{{img}}" data-color-pro-id="{{product.id}}" class="color-swatch lazyload  color-swatch-{{value}}" title="{{value}}">
            </span>
            {% endif %}
            {% endif %}
            {% endfor %}
          </div>

          <select style="display:none" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
            {% for value in option.values %}
            <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
            {% endfor %}
          </select>

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

        <script type="lazyload2" defer="defer">
          function colorSwatchHandler(color) {
            var colorOptionElm = document.querySelector('select option[value="' + color + '"]'),
                colorSpanElm = document.querySelector('span[title="' + color + '"]'),
                activeSwatch = document.querySelector('.color-swatch.active'),
                change = new Event('change', {bubbles: true, cancelable: false});
            if (activeSwatch) {
              activeSwatch.className = activeSwatch.className.replace(' active', '');
            }
            colorOptionElm.selected = "selected";
            colorSpanElm.className += ' active';
            colorOptionElm.parentElement.dispatchEvent(change);
          }
        </script>
      </div>
    </form>
    {% endif %}
    {% if section.settings.add_cart_show %}
    <form method="post" action="/cart/add" class="product_cart_form">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
      {% comment %} <button type="submit" class="btn buttonAddtoCart">Adicionar ao carrinho</button> {% endcomment %}
    </form>
    {% endif %}
  </div>

</div>
