{% if products %}
  {% for index, product in products %}
    {% if positionModulo %}
      <div class="item-column{{ cart or box_large ? ' item-column--large' : '' }} padding-small" {{ index == 0 and productsCount is defined ? 'data-quantity="' ~ productsCount ~ '"' : '' }}>
      <div class="itembox rel {{ cart ? 'shadow-medium' : ' paper' }}">
        <div class="itembox-header" style="justify-content: flex-start;">
          {% if futura_habilita_lista_desejos %}
            <button type="button" title="{{ (product.in_wishlist is defined and product.in_wishlist) ? 'Remover da lista de desejos' : button_wishlist }}" data-product-id="{{ product.product_id }}" class="itembox-btn text-small js-btn-wishlist btn-wishlist">
              <i class="{{ (product.in_wishlist is defined and product.in_wishlist) ? 'fas' : 'far' }} fa-heart"></i>
            </button>
          {% endif %}
        </div>
        <a href="{{ product.href }}" title="{{ product.name }}" class="itembox-image-link image-loading-in-background" {{ product.ratio }}>

          <div class="itembox-tags" style>
            {% if wg24_futura_prod_exibe_selo and product.valida_selo %}
              <div class="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="itembox-sale-label-title">
                      {{ product.title_promotion }}
                    </div>
                  {% endif %}
                  <div class="itembox-sale-label {{ itembox_sale_label }}">
                    {{ product.porcentagemDesconto }}
                  </div>
                {% endif %}
              {% endif %}
            {% elseif product.promotion_type == Type_Promocao.Tp_Brinde %}
              <div class="itembox-sale-label {{ itembox_sale_label }}">
                {{ text_brinde }}
              </div>
            {% endif %}
          </div>

          {% if product.thumb %}
            {% if efeitoimg == constant('Type_EfeitoImagem::Tp_Padrao') %}
              <picture>
                <source class="load-image" srcset="{{ product.thumb.webp }}" data-src="{{ product.thumb.webp }}">
                <img class="load-image" src="" data-src="{{ product.thumb.jpg }}" alt="{{ product.name }}">
              </picture>
            {% else %}
              <picture>
                <source class="load-image" srcset="{{ product.thumb.webp }}" data-src="{{ product.thumb.webp }}">
                <img class="itembox-primary-image load-image" src="" data-src="{{ product.thumb.jpg }}" alt="{{ product.name }}">
              </picture>
              <picture>
                <source class="load-image" srcset="{{ product.image_extra.webp }}" data-src="{{ product.image_extra.webp }}">
                <img class="itembox-secondary-image load-image" src="" data-src="{{ product.image_extra.jpg }}" alt="{{ product.name }}">
              </picture>
            {% endif %}
          {% endif %}

          {% if config_product_list_rating_status and product.rating %}
            <span class="itembox-compact-rating">
              <i aria-hidden="true" class="fas fa-star"></i>
              {{product.rating}}
            </span>
          {% endif %}
        </a>

        <div class="itembox-content">
          {% if config_show_cronometer and product.promotion_id and product.promotion_started %}
            <div class="flex middle-xs bottom-padding-small">
              <i class="fas fa-stopwatch right-margin-small vertical-padding-small promotion-cronometer" style="font-size: clamp(21px, 0px + 1vw, 30px);"></i>
              <div>
                <span class="text-x-small visible-block text-uppercase text-grey">{{ text_promotion }}</span>
                <span style="font-size: clamp(0.95rem, 0.95rem + 0vw, 1.125rem);" class="text-bold text-large promotion-cronometer js-promotion-id-{{ product.promotion_id }}"></span>
              </div>
            </div>
          {% endif %}

          <a href="{{ product.href }}" title="{{ product.name }}" class="itembox-inner">
            {{ (product.model) ? '<span class="itembox-model">' ~ text_code ~ product.model ~ '</span>' : ''}}

            <h3 class="itembox-title {{ product.class_one_line }}">
              {{ product.name}}
              {% if futuragrade_list_product and product.product_color_description != '' %}
                <span class="text-x-small text-uppercase"> • {{ product.product_color_description}}</span>
              {% endif %}
            </h3>


            <span itemprop="description" class="itembox-description">
              {% if product.description != "..." %}
                {{ product.description }}
              {% endif %}
            </span>

            {% if display_product_grid and product.gridhave and product.quantity > 0 %}
              <div class="itembox-view-more-colors width-full">Mais opções</div>
            {% endif %}

            <div class="itembox-price full-width" itemtype="http://schema.org/Offer" itemscope="" itemprop="offers">
              {% if product.aviseme %}
                <span class="text-aviseme">Produto esgotado</span>
              {% elseif product.price and not product.aviseme %}

                {% if product.promotion_type == Type_Promocao.Tp_Brinde %}
                  <span class="itembox-single-price">
                    {% if exibe_futura_preco_dinamico %}
                      {{ product.futura_preco_dinamico_exibicoes }}
                    {% else %}
                      {{ product.price }}
                    {% endif %}
                  </span>
                {% else %}
                  {% if not product.special %}
                    <span class="itembox-single-price">
                      {% if exibe_futura_preco_dinamico %}
                        {{ product.futura_preco_dinamico_exibicoes }}
                      {% else %}
                        {{ product.price }}
                      {% endif %}
                    </span>
                  {% else %}
                    {% if exibe_futura_preco_dinamico %}
                      {{ product.futura_preco_dinamico_exibicoes }}
                    {% else %}
                      <span class="itembox-old-price">
                        {{ text_de }}
                        {{ product.price }}
                      </span>
                      <span class="itembox-regular-price">
                        {{ text_por }}
                        {{ product.special }}
                      </span>
                    {% endif %}
                  {% endif %}
                {% endif %}

              {% endif %}
            </div>
          </a>

          <div class="itembox-actions call-me-div">
            {% if productBoxButton %}
              {% if product.aviseme %}
                {{ product.aviseme }}
                <div class="left-padding-x-small">
                  <a
                    class="cursor-pointer itembox-btn js-remove-buylater visible-block btn-removeProduct"
                    data-product-id="{{ product.product_id }}"
                    data-layout-id="{{ layout_id_product }}"
                    {% if listGrid is defined and listGrid == false %}data-list-grid="false"{% endif %}
                    {% if product.gridhave %}data-grid-id="{{ product.gridhave }}"{% endif %}
                  >
                    <span class="text-break-word text-medium">{{ text_remove }}</span>
                  </a>
                </div>
              {% else %}
                <div class="full-width">
                  <div class="flex nowrap-xs">
                    <button
                      type="button"
                      class="itembox-btn btn-default btn-small-square btn-cart btn-full
                      {{ productBoxButton == typeProductBoxButton.Tp_QuantityAndButton and
                      product.gridhave and
                      listGrid is not defined
                      ? 'js-btn-quick-view'
                      : 'js-buylater-to-cart'}}
                    "
                      title="{{ text_add_to_cart }}"
                      data-product-id="{{ product.product_id }}"
                      data-layout-id="{{ layout_id_product }}"
                      data-quantity="{{ product.selected_quantity }}"
                      {% if listGrid is defined and listGrid == false %}data-list-grid="false"{% endif %}
                      {% if product.gridhave %}data-grid-id="{{ product.gridhave }}"{% endif %}
                    >
                      <span class="wrap text-break-word">{{ text_add_to_cart }}</span>
                    </button>

                    {% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}
                        <span class="btn-cart-notification js-btn-cart-notification{% if product.notification_value %} have-in-cart{% endif %}" title="Produto já se encontra no carrinho"></span>
                    {% endif %}
                  </div>
                  <div class="vertical-margin-x-small left-margin-x-small">
                    <a
                      class="itembox-btn js-remove-buylater cursor-pointer"
                      data-product-id="{{ product.product_id }}"
                      data-layout-id="{{ layout_id_product }}"
                      {% if listGrid is defined and listGrid == false %}data-list-grid="false"{% endif %}
                      {% if product.gridhave %}data-grid-id="{{ product.gridhave }}"{% endif %}
                    >
                      <span class="text-break-word text-medium">{{ text_remove }}</span>
                    </a>
                  </div>
                </div>
              {% endif %}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% else %}
        <div class="bottom-margin-medium productaside-item item-row" {{ index == 0 and productsCount is defined ? 'data-quantity="' ~ productsCount ~ '"' : '' }}>
          <a href="{{ product.href }}" title="{{ product.name }}" class="visible-block">
            <div class="row small-space-xs middle-xs">
            <div class="col-xs-width-auto">
              <div class="content-box">
                <picture>
                  <source class="load-image" srcset="" data-src="{{ product.thumb_mini.webp }}">
                  <img class="load-image itembox-image-no-effect visible-block border-gray" src="" data-src="{{ product.thumb_mini.jpg }}" alt="{{ product.name }}">
                </picture>
                {% if product.price and product.special %}
                  {% if product.aviseme %}
                    <div class="text-small text-center visible-block padding-x-small productaside-sale-label">
                      {{ product.porcentagemDesconto }}
                    </div>
                  {% endif %}
                {% endif %}
              </div>
            </div>
            <div class="col-xs">
              <span class="text-medium productaside-title">{{ product.name }}</span>
              {% if product.price %}
                <div class="top-margin-small">
                  {% if not product.aviseme %}
                    <span class="text-aviseme">{{ aviseme_info.price_esgotado }}</span>
                  {% elseif product.price %}
                    {% if not product.special %}
                      <span class="text-medium productaside-price">
                    <b>{{ product.price }}</b>
                  </span>
                    {% else %}
                      <span class="text-small visible-block productaside-old-price">
                    <strike>{{ product.price }}</strike>
                  </span>
                      <span class="text-medium productaside-price">
                    <b>{{ product.special }}</b>
                  </span>
                    {% endif %}
                  {% endif %}
                </div>
              {% endif %}
            </div>
          </div>
          </a>
          <div class="left-padding-x-small">
            {% if productBoxButton %}
              {% if product.aviseme %}
                {{ product.aviseme }}
                <div>
                  <a
                    class="cursor-pointer itembox-btn js-remove-buylater visible-block btn-removeProduct"
                    data-product-id="{{ product.product_id }}"
                    data-layout-id="{{ layout_id_product }}"
                    {% if listGrid is defined and listGrid == false %}data-list-grid="false"{% endif %}
                    {% if product.gridhave %}data-grid-id="{{ product.gridhave }}"{% endif %}
                  >
                    <span class="text-break-word text-medium">{{ text_remove }}</span>
                  </a>
                </div>
              {% else %}
                <a
                  class="itembox-btn btn-cart cursor-pointer visible-block {{ productBoxButton == typeProductBoxButton.Tp_QuantityAndButton and
                  product.gridhave and
                  listGrid is not defined
                  ? 'js-btn-quick-view'
                  : 'js-buylater-to-cart'}}"
                  data-product-id="{{ product.product_id }}"
                  data-layout-id="{{ layout_id_product }}"
                  data-quantity="{{ product.selected_quantity }}"
                  {% if listGrid is defined and listGrid == false %}data-list-grid="false"{% endif %}
                  {% if product.gridhave %}data-grid-id="{{ product.gridhave }}"{% endif %}
                >
                  <span class="wrap text-break-word text-small">{{ text_add_to_cart }}</span>
                </a>
                <a
                  class="cursor-pointer itembox-btn js-remove-buylater visible-block"
                  data-product-id="{{ product.product_id }}"
                  data-layout-id="{{ layout_id_product }}"
                  {% if listGrid is defined and listGrid == false %}data-list-grid="false"{% endif %}
                  {% if product.gridhave %}data-grid-id="{{ product.gridhave }}"{% endif %}
                >
                  <span class="text-break-word text-medium">{{ text_remove }}</span>
                </a>
              {% endif %}
            {% endif %}
          </div>
        </div>
    {% endif %}
  {% endfor %}
{% elseif slider==false %}
  <div class="col-xs">
    <span class="text-medium">{{ text_empty }}</span>
  </div>
{% endif %}