{% if products %}
	{% for index, product in products %}
		<div class="item-column{{ box_large ? ' item-column--large' : '' }}" {{ index == 0 and productsCount is defined ? 'data-quantity="' ~ productsCount ~ '"' : '' }}>
			<div class="itembox rel paper">
				<div class="itembox-header">
					{% if futura_habilita_lista_comparacao and product.aviseme is empty %}
						<button data-product-id="{{ product.product_id }}" type="button" class="btn-compare js-check-compare" title="{{ (product.product_id in compare_list) ? 'Remover da lista de comparação' : 'Colocar na lista de comparação' }}" {{ product.product_id in compare_list ? 'checked="true"' : 'checked="false"'}}>
							<i class="fas fa-code-compare {{ product.product_id in compare_list ? 'selected' : ''}}"></i>
						</button>
					{% endif %}
					{% 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">
						{% 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 %}

					{% if wg24_quick and not product.aviseme %}
						<button class="btn-default btn-small-square shadow-medium js-btn-quick-view itembox-btn-detail" data-product-id="{{ product.product_id }}" rel="category-gallery" href="{{ product.href }}">
							<i class="fas fa-search" aria-hidden="true"></i>
						</button>
					{% 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 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 %}
											<div class="itembox-dynamic-price">
												{{ product.futura_preco_dinamico_exibicoes }}
											</div>
										{% else %}
											<div class="itembox-normal-price">
												<span class="itembox-old-price">
													{{ product.price }}
												</span>
												<span class="itembox-regular-price">
													{{ product.special }}
												</span>
											</div>
										{% endif %}
									{% endif %}
								{% endif %}

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

					<div class="itembox-actions">
						{% if productBoxButton %}
							{% if product.aviseme %}
								{{ product.aviseme }}
							{% else %}
								<div class="flex nowrap-xs full-width">
									{% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}
										<div class="itembox-quantity-control js-fator" data-fator="{{ product.fator_multiplicador }}">
											<button class="itembox-btn btn-down js-btn-qtd js-down" type="button">
												<i aria-hidden="true" class="fas fa-minus"></i>
											</button>
											<input type="text" name="quantity" size="1" maxlength="4" value="{{ product.quantity_initial }}" class="numeric input-text quantity js-quantity"/>
											<button class="itembox-btn btn-up js-btn-qtd js-up" type="button">
												<i aria-hidden="true" class="fas fa-plus"></i>
											</button>
										</div>
									{% else %}
										<input type="hidden" name="quantity" size="2" value="{{ product.fator_multiplicador }}"/>
									{% endif %}

									{% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}	
										<button type="button" class="itembox-btn btn-default btn-medium-square btn-cart
																										{{ productBoxButton == typeProductBoxButton.Tp_QuantityAndButton and
																										product.gridhave and
																										listGrid is not defined
																										? 'js-btn-quick-view'
																										: 'js-btn-cart'}}
																										" title="{{ button_cart }}" 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 %}>
											<i class="{{ icon_cart }}"></i>
											<span>{{ button_cart }}</span>
										</button>
									{% elseif productBoxButton == typeProductBoxButton.Tp_JustButton %}
										<button type="button" class="itembox-btn full-width btn-default btn-medium-square btn-cart
																										{{ productBoxButton == typeProductBoxButton.Tp_QuantityAndButton and
																										product.gridhave and
																										listGrid is not defined
																										? 'js-btn-quick-view'
																										: 'js-btn-cart'}}
																										" title="{{ button_cart }}" 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 %}>
											<i class="{{ icon_cart }}"></i>
											<span>{{ button_cart }}</span>
										</button>
									{% endif %}
									{% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}
										<span class="btn-cart-notification js-btn-cart-notification{% if product.notification_value %} have-in-cart{% endif %}"></span>
									{% endif %}
								</div>
							{% endif %}
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endfor %}
{% elseif slider==false %}
	<div class="col-xs">
		<span class="text-medium">{{ text_empty }}</span>
	</div>
{% endif %}
