{% 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">
  {% comment %}
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>
  {% endcomment %}

  {% 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="" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="">
        <a href="{{ product.url | within: collection }}"><img id=""
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              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"
                                                              data-image> </a>
      </div>
    </div>
    {% if product.tags contains 'Sale' %}
    <div class="sale-label"><p>Sale</p></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 class="bottom_btn">
      {% comment %}
      <a class="" href="{{ product.url | within: collection }}"></a>
      {% endcomment %}
      <form method="post" action="/cart/add" class="{% if section.settings.show_variant == blank %}add_btn{% endif %}" >
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        <input type="hidden" min="1" type="number" id="quantity" name="quantity" value="1"/>
        <button type="submit" class="btn buttonAddtoCart">Adicionar ao carrinho</button>
      </form>
    </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="h4 grid-view-item__title product-card__title" aria-hidden="true"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></div>

  {% comment %}
  <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
  {% endcomment %}

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

  {% comment %}
  <div class="description">
    <p>{{ product.description | truncate: 75 }}</p>
  </div>
  {% endcomment %}



</div>

