{#
/**
 * @file
 *
 * Default product template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The rendered product fields.
 *   Use 'product' to print them all, or print a subset such as
 *   'product.title'. Use the following code to exclude the
 *   printing of a given field:
 *   @code
 *   {{ product|without('title') }}
 *   @endcode
 * - product_entity: The product entity.
 * - product_url: The product URL.
 *
 * @ingroup themeable
 */
#}
<article{{ attributes }}>
  <div class="item node-product-teaser">
    <div class="c-content-product-2 c-bg-white c-border">
      <div class="c-content-overlay">
        {{ product.field_sale_label }}
        {{ product.field_new_label }}
        <div class="c-overlay-wrapper">
          <div class="c-overlay-content">
            <a href="{{ product_url }}" class="btn btn-md c-btn-grey-1 c-btn-uppercase c-btn-bold c-btn-border-1x c-btn-square">
              {{ 'Explore'|t }}
            </a>
          </div>
        </div>
        <div class="hidden">
          {{ product['variation_field_images'][0] }}
        </div>
        <div class="c-bg-img-center-contain c-overlay-object" data-height="height" style="height: 270px; background-image: url('{{ image_url }}');"></div>
      </div>
      <div class="c-info">
        <p class="c-title c-font-18 c-font-slim">
          {% if product.title %}
            {{ product['title'][0] }}
          {% endif %}
        </p>
        <p class="c-price c-font-16 c-font-slim">
          {{ product['variation_price'][0] }}
          <span class="c-font-16 c-font-line-through c-font-red">
            {{ product['variation_field_old_price'][0] }}
          </span>
        </p>
      </div>
      <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group c-border-top" role="group">
          <span class="flag-outer flag-outer-wishlist">
            <span class="flag-wrapper flag-wishlist">
              {{ product.flag_wishlist }}
            </span>
          </span>
        </div>
        <div class="btn-group c-border-left c-border-top extra-components" role="group">
          <div class="field field-name-field-products field-type-commerce-product-reference field-label-hidden">
            <a href = "{{ product_url }}" class="btn btn-lg c-btn-white c-btn-uppercase c-btn-square c-font-grey-3 c-font-white-hover c-bg-red-2-hover c-btn-product" >
              {{ 'Add to Cart'|t}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>