{% if products %}
  {% for product in products %}
    <div class="ftr-grid__card ftr-product-card">
      {% if product.in_wishlist is defined %}
        <i class="material-icons ftr-wishlist-icon ftr-text--grey {{ (product.in_wishlist) ? 'in' : '' }}" data-product-id="{{ product.product_id }}">{{ (product.in_wishlist) ? '&#xE87D;' : '&#xE87E;' }}</i><!-- favorite border -->
      {% endif %}
      <div class="ftr-itembox-tags {{ itembox_sale_label }}">
        {% if wg24_futura_prod_exibe_selo and product.valida_selo %}
          <div class="ftr-itembox-new-product">
            <span>{{ novo_selo }}</span>
          </div>
        {% endif %}

        {% if product.promotion_type == Type_Promocao.Tp_PercDesconto %}
          {% if product.price and product.special %}
            {% if not product.aviseme %}
              {% if product.title_promotion and itembox_sale_label == 'itembox-sale-label-square' %}
                <div class="ftr-itembox-sale-label-title">
                  {{ product.title_promotion }}
                </div>
              {% endif %}
              <div class="ftr-itembox-sale-label">
                {{ product.porcentagemDesconto }}
              </div>
            {% endif %}
          {% endif %}
        {% elseif product.promotion_type == Type_Promocao.Tp_Brinde %}
          <div class="ftr-itembox-sale-label {{ itembox_sale_label }}">
            {{ text_brinde }}
          </div>
        {% endif %}

      </div>
      <a href="{{ product.href }}" class="ftr-product-card__content ftr-js-ripple-effect">
        <div class="ftr-product-card__image">
          <div class="ftr-image-load" style="padding-bottom: {{aspect_ratio}};">
            <img class="ftr-image-load__image ftr-js-image-load__image" src="assets/img/loading-skeleton.svg" alt="Imagem do produto" data-src="{{ product.thumb.jpg }}">
          </div>
        </div>
        <div class="ftr-product-card__info">
          {% if cronometer %}
            <div class="ftr-out-space--b-s ftr-grid ftr-grid--between ftr-grid--middle ftr-in-space--n ftr-out-space--v-s">
              <i class="ftr-out-space--b-xs material-icons ftr-alarm-icon ftr-text--primary ftr-text--grey ftr-out-space--r-s" style="font-size:30px;">alarm</i>
              <div>
                <span class="ftr-text--xs ftr-block ftr-text--upper ftr-text--grey ftr-text-line--n" style="font-size:9px;">{{ text_promotion }}</span>
                <span class="ftr-text--bold ftr-text--primary ftr-text--s promotion-cronometer js-promotion-id-{{ product.promotion_id }}"></span>
              </div>
            </div>
          {% endif %}
          <div class="ftr-product-card__name">
            <span class="ftr-text--dark">{{ product.name }}</span>
          </div>

          {% if (product.price) and (not product.aviseme) %}
            {% if product.promotion_type == Type_Promocao.Tp_Brinde %}
              <span class="ftr-product-card__price">
                {% if exibe_futura_preco_dinamico %}
                  {{ product.futura_preco_dinamico_exibicoes }}
                {% else %}
                  <span class="ftr-text--line-through">
                    {{ product.price }}
                  </span>
                {% endif %}
              </span>
            {% else %}
              <div class="ftr-product-card__price">
                {% if not product.special %}
                  {% if exibe_futura_preco_dinamico %}
                    <span>
                    {{ product.futura_preco_dinamico_exibicoes }}
                  </span>
                  {% else %}
                    <span class="ftr-text--secondary">
                    {{ product.price }}
                  </span>
                  {% endif %}
                {% else %}
                  {% if exibe_futura_preco_dinamico %}
                    <span>
                    {{ product.futura_preco_dinamico_exibicoes }}
                  </span>
                  {% else %}
                    <span class="ftr-text--line-through">
                    {{ product.price }}
                  </span>
                    <span class="ftr-text--secondary">
                    {{ product.special }}
                  </span>
                  {% endif %}
                {% endif %}
              </div>
            {% endif %}
          {% endif %}

        </div>
        {% if productBoxButton and (not product.aviseme) %}
          {% if avise_me_status is defined and avise_me_status and product.quantity <= 0 %}
            <button class="ftr-quantity-wholesale__button ftr-js-swipe-content-display ftr-btn ftr-h-full ftr-out-space--t-s ftr-background--primary" type="button" data-product-id="{{ product.product_id }}" data-swipe-content="ftr-quantity-wholesale__content-aviseme">{{ aviseme_info.text_continue }}</button>
          {% else %}
            {% if futuraquantidadeatacado_compraroutrascores is defined and futuraquantidadeatacado_compraroutrascores %}
              <div class="ftr-flex ftr-out-space--t-s ftr-js-product-card-quantity">
                <span class="ftr-text--primary ftr-in-space--v-xs ftr-js-btn-qtd ftr-js-down">
                  <i class="material-icons">&#xE15B;</i>
                </span>
                <label class="ftr-field ftr-in-space--v-n">
                  <input type="text" value="0" inputmode="numeric" pattern="[0-9]{1,4}"
                    class="ftr-product-card__quantity__field ftr-field__entry ftr-js-field__entry ftr-text--center ftr-js-quantity mask-quantity" data-fator-multiplicador="{{ product.fator_multiplicador }}" data-product-id="{{ product.product_id }}" maxlength="4">
                </label>
                <span class="ftr-text--primary ftr-in-space--v-xs ftr-js-btn-qtd ftr-js-up">
                  <i class="material-icons">&#xE145;</i>
                </span>
              </div>
            {% else %}
              <button
                class="ftr-quantity-wholesale__button ftr-js-swipe-content-display ftr-btn ftr-h-full ftr-out-space--t-s ftr-background--primary"
                type="button"
                data-product-id="{{ product.product_id }}"
                data-swipe-content="ftr-quantity-wholesale__content"
                data-layout-id="{{ layout_id_product }}"
                data-fator-multiplicador="{{ product.fator_multiplicador }}"
              >{{ button_cart }}</button>
              <span class="ftr-quantity-wholesale__notification ftr-js-quantity-wholesale__notification{% if product.notification_value %} ftr-quantity-wholesale__notification--have-in-cart{% endif %}"></span>
            {% endif %}
          {% endif %}
        {% endif %}
        {% if product.aviseme %}
          {{ product.aviseme }}
        {% endif %}
      </a>
    </div>
  {% endfor %}
{% endif %}