<div id="product-content" class="row rel">
	{% if column_left %}
		<div class="col-xs-12 col-sm-4 col-md-3">
			<div class="content-box hidden-md-down">
				{{ column_left }}
			</div>
		</div>
	{% endif %}
	<div class="col-xs-12{% if column_left %} col-sm-8 col-md-9{% endif %}">
		<div class="row" id="delphi-product-view" data-info='{{ dataInfo }}'>
			<div class="col-xs-12 col-md">
				<div class="content-box">
					{% if futura_habilita_lista_desejos %}
						<div class="js-toggle-wishlist flex end-xs">
							<div class="text-x-large btn-wishlist padding-medium cursor-pointer js-btn-wishlist" data-product-id="{{ product_id }}">
								<i class="{{ in_wishlist ? 'fas' : 'far' }} fa-heart" aria-hidden="true"></i>
							</div>
						</div>
					{% endif %}
					<div class="flex center-xs">
						{% if thumb %}
							<div style="cursor:zoom-in;overflow:auto;">
								<img src="{{ thumb }}" id="main-image" alt="{{ heading_title }}" data-zoom-image="{{ popup }}" data-index="0" data-w="{{ image_popup_width }}" data-h="{{ image_popup_height }}">
							</div>
						{% endif %}
						<div class="flex full-width top-margin-small{% if images is empty and videos is empty %} hidden{% endif %}" id="thumbnails">
							{% if thumb %}
								<a href="{{ popup }}" class="js-thumbnail right-margin-small" rel="group" data-image="{{ thumb }}" data-zoom-image="{{ popup }}">
									<img src="assets/img/loading-skeleton.svg" class="load-image visible-block" height="80" data-src="{{ thumb }}">
								</a>
							{% endif %}
							{% if images is not empty %}
								{% for image in images %}
									{% if image.thumb and image.popup %}
										<a href="{{ image.popup }}" class="js-thumbnail right-margin-small" rel="group" data-image="{{ image.thumb }}" data-zoom-image="{{ image.popup }}">
											<img src="assets/img/loading-skeleton.svg" class="load-image visible-block" height="80" data-src="{{ image.thumb }}" alt="{{ image.thumb }}">
										</a>
									{% endif %}
								{% endfor %}
							{% endif %}
							{% if videos is not empty %}
								{% for video in videos %}
									<a href="{{ type_zoom == types_zoom.Tp_Fancybox ? video.embed : video.iframe }}" class="js-thumbnail right-margin-small" rel="group" data-type="video">
										<img src="assets/img/loading-skeleton.svg" class="load-image visible-block" height="80" data-src="{{ video.thumb }}" alt="{{ video.thumb }}">
									</a>
								{% endfor %}
							{% endif %}
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md">
				<div class="content-box">

					{% if discount_kit_info %}
						<div class="visible-inline-block padding-small background-warning text-warning text-small bottom-margin-medium">
							<span>{{ discount_kit_info }}</span>
						</div>
					{% endif %}

					<h1 class="heading-1 text-break-word">{{ product_name }}</h1>
					<div class="text-medium text-gray vertical-margin-small">
						{% if model %}
							({{ text_model }}
							{{ model }})
						{% endif %}
						{{ stock }}
						{% if manufacturer_product %}
							|
							{{ text_manufacturer }}
							<a href="{{ manufacturers }}">{{ manufacturer_product }}</a>
						{% endif %}
					</div>
					{% if review_status %}
						<div class="vertical-middle text-medium">
							<i class="far fa-star active_star{{ rating }}"></i>
							<i class="far fa-star active_star{{ rating }}"></i>
							<i class="far fa-star active_star{{ rating }}"></i>
							<i class="far fa-star active_star{{ rating }}"></i>
							<i class="far fa-star active_star{{ rating }}"></i>
						</div>
						<span class="text-medium text-gray vertical-middle">({{ reviews }})</span>
					{% endif %}
					<div class="addthis_inline_share_toolbox top-margin-small bottom-margin-medium"></div>


					{% if produto_brinde %}
						<a href="{{produto_brinde.href}}" class="flex nowrap-xs middle-xs paper padding-large bottom-margin-medium">
							<div class="right-margin-medium">
								<img src="assets/img/loading-skeleton.svg" class="load-image visible-block" height="80" data-src="{{ produto_brinde.thumb }}">
							</div>
							<div>
								<span class="text-medium text-bold visible-block">{{ produto_brinde.product_name }}</span>
								<div class="visible-inline-block padding-small background-warning text-warning text-small">
									<i class="fas fa-gifts"></i>
									<span>{{ text_gift }}</span>
								</div>
							</div>
						</a>
					{% endif %}

					{% if config_show_cronometer and promotion_id and promotion_started %}
						<div class="flex nowrap-xs middle-xs paper padding-large bottom-margin-medium">
							<i class="fas fa-stopwatch right-margin-small promotion-cronometer" style="font-size:30px;"></i>
							<div>
								<span class="text-x-small visible-block text-uppercase text-grey">{{ text_promotion }}</span>
								<span class="text-bold text-large promotion-cronometer js-promotion-id-{{ promotion_id }}"></span>
							</div>
						</div>
					{% endif %}

					<div class="paper horizontal-padding-large bottom-padding-large js-product-container-action">
						{% if futuragrade_status %}
							{% if exibe_product_colors %}
								<span class="text-small text-gray visible-block top-padding-large">
									{{ text_color }}
									<b class="text-dark">{{ color_selected }}</b>
								</span>
								<div class="flex">
									{% if combobox_colors %}
										<div class="field field-medium top-margin-x-small">
											<select name="colors" id="colors" data-placeholder="{{ text_color }}">
												{% for color in productColors %}
													<option value="{{ color.productcolor_id }}" {% if tipo_ex_cor != '0' %} data-img="{{ color.produto_img_princ }}" {% else %} data-color="{{ color.primary_color }}, {{ color.secundary_color }}"  {% endif %} {{ color.description == color_selected ? 'selected' : '' }} data-stock="{{ color.tem_estoque }}">
														{{ color.description }}
													</option>
												{% endfor %}
											</select>
										</div>
									{% elseif tipo_ex_cor == '0' %}
										{% for color in productColors %}
											<button type="button" class="btn-default btn-small-square right-margin-x-small top-margin-x-small {{ color_selected == color.description ? '' : 'btn-outline' }} {{ isProductGrid ? 'js-grid-option' : '' }}" data-id="{{ color.productcolor_id }}" data-caracteristica="color_id">
												<span {% if not config_stock_checkout and (color.tem_estoque == "N" or color.tem_estoque is not defined) %} class="text-dashed" {% endif %}>{{ color.description }}</span>
												{% if color.primary_color %}
													<i class="bg-colors" style="background: {{ color.primary_color and color.secundary_color ? 'linear-gradient(135deg,' ~ color.primary_color ~ ' 0%,' ~ color.primary_color ~ ' 50%,' ~ color.secundary_color ~ ' 50%,' ~ color.secundary_color ~ ' 100%);' : color.primary_color }}"></i>
												{% endif %}
											</button>
										{% endfor %}
									{% else %}
										{% for color in productColors %}
											<div class="right-margin-x-small top-margin-x-small">
												<img type="image" class="visible-block cursor-pointer load-image {{ isProductGrid ? 'js-grid-option' : '' }}" style="{% if color_selected == color.description %}border: 2px solid black;{% endif %} {% if color.tem_estoque == "N" %}opacity:.5;{% endif %} max-height: 80px;" data-caracteristica="color_id" data-id="{{ color.productcolor_id }}" title="{{ color.description }}" src="assets/img/loading-skeleton.svg" data-src="{{ color.produto_img_princ }}">
											</div>
										{% endfor %}
									{% endif %}
								</div>
							{% endif %}

							{% if exibe_product_sizes %}
								<span class="text-small text-gray visible-block top-margin-large">
									{{ text_size }}
									<b class="text-dark">{{ size_selected }}</b>
								</span>
								<div class="flex">
									{% if combobox_sizes %}
										<div class="field field-medium top-margin-x-small">
											<select name="sizes" id="sizes" data-placeholder="{{ text_size }}">
												{% for size in productSizes %}
													<option value="{{ size.productsize_id }}" {{ size.description == size_selected ? 'selected' : '' }} data-stock="{{ size.tem_estoque }}">
														{{ size.description }}
													</option>
												{% endfor %}
											</select>
										</div>
									{% else %}
										{% for size in productSizes %}
											<button type="button" class="btn-default btn-small-square right-margin-x-small top-margin-x-small {{ size_selected == size.description ? '' : 'btn-outline' }} {{ isProductGrid ? 'js-grid-option' : '' }}" data-id="{{ size.productsize_id }}" data-caracteristica="size_id">
												<span {% if not config_stock_checkout and (size.tem_estoque == "N" or size.tem_estoque is not defined) %} class="text-dashed" {% endif %}>
													{{ size.description }}
												</span>
											</button>
										{% endfor %}
									{% endif %}
								</div>
							{% endif %}

							{% if exibe_product_specifications or product_specification_description %}
								<span class="text-small text-gray visible-block top-margin-large">
									{{ text_title_specification }}
									<b class="text-dark">{{ specification_selected }}</b>
								</span>
								<div class="flex">
									{% if combobox_specifications %}
										<div class="field field-medium top-margin-x-small">
											<select name="specifications" id="specifications" data-placeholder="{{ text_title_specification }}">
												{% for spec in productSpecifications %}
													<option value="{{ spec.productspecification_id }}" {{ spec.description == specification_selected ? 'selected' : '' }} data-stock="{{ spec.tem_estoque }}">
														{{ spec.description }}
													</option>
												{% endfor %}
											</select>
										</div>
									{% else %}
										{% for spec in productSpecifications %}
											<button type="button" class="btn-default btn-small-square right-margin-x-small top-margin-x-small {{ specification_selected == spec.description ? '' : 'btn-outline' }} {{ isProductGrid ? 'js-grid-option' : '' }}" data-id="{{ spec.productspecification_id }}" data-caracteristica="specification_id">
												<span {% if not config_stock_checkout and (spec.tem_estoque == "N" or spec.tem_estoque is not defined) %} class="text-dashed" {% endif %}>
													{{ spec.description }}
												</span>
											</button>
										{% endfor %}
									{% endif %}
								</div>
							{% endif %}

							{% if exibe_product_colors or exibe_product_sizes or exibe_product_specifications or product_color_description or product_size_description or product_specification_description %}
								<hr class="bottom-border-gray top-margin-large">
							{% endif %}
						{% endif %}

            {% set priceRender %}
              {% if price %}
                <div class="top-padding-large">
                  {% if exibe_futura_preco_dinamico %}
                    {{ futura_preco_dinamico_produto }}
                  {% elseif special %}
                    <span class="visible-block text-medium text-bold text-gray">
											<s>{{ price }}</s>
										</span>
                    <span class="visible-block bigger-text-small text-bold text-dark vertical-margin-x-small">{{ special }}</span>
                    <span class="visible-block text-medium text-dark">{{ porcentagemDesconto }}
											de desconto</span>
                  {% else %}
                    <span class="visible-block bigger-text-small text-bold text-dark">{{ price }}</span>
                  {% endif %}
                </div>
              {% endif %}
            {% endset %}

						{% if aviseme %}
              {% if mostra_preco_sem_estoque %}
                {{ priceRender }}
              {% endif %}
							<div class="top-padding-large">
								<span class="visible-block text-aviseme bottom-margin-medium">Produto esgotado</span>
								{{ aviseme }}
							</div>
						{% else %}

              {{ priceRender }}

							{% if (pagseguro_status and (pagseguro_parcela is defined and pagseguro_parcela) and fator_perfil_pagseguro) and config_customer_price %}
								<span class="visible-block text-medium text-dark top-margin-x-small">Parcele em até 12x no cartão de crédito.</span>
								<span class="visible-block text-small text-gray top-margin-medium">Parcelamento com PagSeguro</span>
								<div class="row x-small-space-xs stretch-xs top-margin-x-small">
									{% for key, value in fator_perfil_pagseguro %}
										<div class="col-xs-4">
											<div class="content-box full-width paper padding-x-small">
												<span class="text-small text-dark">
													{{ key }}x de R$
													{{ value }}
												</span>
											</div>
										</div>
									{% endfor %}
								</div>
							{% endif %}

							{% if config.fidelity_status and pontos %}
								<div class="top-margin-large">
									{{ pontos }}
								</div>
							{% endif %}

							<div class="flex middle-xs nowrap-xs top-padding-large">
								<div class="itembox-quantity-control js-fator right-margin-x-small" data-fator="{{ fator_multiplicador }}" style="width:100%;max-width:initial;height:56px;">
									<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" id="qty" size="1" maxlength="4" value="{{ text_minimum_qtd }}" 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>
								<button type="button" class="btn-default btn-large-square btn-full btn-cart js-btn-cart left-margin-x-small" data-product-id="{{ product_id }}" data-grid='{% if selected is defined %} {{ selected|json_encode }} {% endif %}' data-grid-status="{{ futuragrade_status ? true : false }}">
									<span>{{ button_cart }}</span>
								</button>
								{% if futuraquantidadeatacado_status %}
									<span class="btn-cart-notification js-btn-cart-notification{% if notification_value %} have-in-cart{% endif %}" style="height:56px"></span>
								{% endif %}
							</div>

							{% if exibir_botao_mercado_livre and link_ml %}
								<a href="{{ link_ml }}" class="text-large visible-inline-block top-margin-large" target="_blank">
									<span>{{ button_mercado_livre }}</span>
									<i class="fas fa-external-link-alt text-medium"></i>
								</a>
							{% endif %}

							{% if futura_habilita_lista_comparacao or (listapresente_status and customerIsLogged) %}
								<hr class="bottom-border-gray top-margin-large bottom-margin-small">
								<div class="flex nowrap-md">
									{% if futura_habilita_lista_comparacao %}
										<label class="checkbox checkbox-large">
											<input type="checkbox" class="checkbox-entry js-check-compare" data-product-id="{{ product_id }}">
											<span class="checkbox-text">{{ button_compare }}</span>
										</label>
									{% endif %}

									{% if listapresente_status and customerIsLogged %}
										<button type="button" class="btn-default btn-large-square btn-product-listapresente js-btn-gifts-list" id="button-listapresente">
											<i class="fas fa-gift"></i>
										</button>
									{% endif %}
								</div>
							{% endif %}

						{% endif %}
					</div>

					{% if config_exibe_frete == types_status.Tp_Habilitado and exibe_frete and not aviseme %}
						<div class="paper padding-large top-margin-medium js-frete">
							<label class="field field-medium" style="max-width:240px;">
								<span class="field-label">{{ entry_cart_frete }}</span>
								<div class="field-entry-group">
									<div class="flex-grow-1">
										<input class="field-entry numeric mask-cep js-postcode-frete-search" id="postcode" type="text" name="postcode" maxlength="9" value="{{ postcode }}" placeholder="{{ entry_postcode }}" data-product-id="{{ product_id }}">
									</div>
									<div>
										<button id="btn-postcode" type="button" class="btn-default btn-medium-square">
											<span>{{ button_frete }}</span>
										</button>
									</div>
								</div>
							</label>
							<a href="#" class="text-small visible-inline-block vertical-padding-small js-postcode-address">{{ text_nao_sei_meu_cep }}</a>
							<div id="postcode-result" class="top-border-gray top-margin-medium top-padding-medium hidden"></div>
						</div>
					{% endif %}

				</div>
			</div>
			<div class="col-xs-12">
				{% if description %}
          <div>
            <div class="flex between-xs middle-xs heading-2 bottom-border-gray top-padding-large bottom-padding-medium top-margin-x-large bottom-margin-medium
             {{ tipo_descricao_expansivel ? ' js-toggle-product-description cursor-pointer ' : ''}}">
              {{ tab_description }}
              {% if tipo_descricao_expansivel %}
                <i class="fas fa-plus js-product-description-plus"></i>
                <i class="fas fa-minus hidden js-product-description-minus"></i>
              {% endif %}
            </div>
            <div class="reset-product-description clearfix {{ tipo_descricao_expansivel ? ' hidden js-product-description-container ' : '' }} ">{{ description }}</div>
          </div>
				{% endif %}

        {% if wg24_l_custom_tab %}
          <div>
            <div class="flex between-xs middle-xs heading-2 bottom-border-gray top-padding-large bottom-padding-medium top-margin-x-large bottom-margin-medium
            {{ tipo_descricao_expansivel ? ' js-toggle-product-description cursor-pointer ' : ''}}">
              {{ tab_title }}
              {% if tipo_descricao_expansivel %}
                <i class="fas fa-plus js-product-description-plus"></i>
                <i class="fas fa-minus hidden js-product-description-minus"></i>
              {% endif %}
            </div>
            <div class="clearfix {{ tipo_descricao_expansivel ? ' js-product-description-container hidden ' : '' }}">
              {{ tab_content }}
            </div>
          </div>
        {% endif %}

				{% if itens_kit %}
					<div class="heading-2 bottom-border-gray top-padding-large bottom-padding-medium top-margin-x-large bottom-margin-medium">
						{{ kit_products }}
					</div>
					{% for itemKitKey, itemKit in itens_kit %}
						<a href="{{itemKit.href}}" class="flex nowrap-xs middle-xs bottom-margin-medium">
							<div class="right-margin-medium">
								<img src="{{itemKit.thumb}}" width="80" height="80" class="visible-block">
							</div>
							<div>
								<span class="text-medium text-bold visible-block bottom-margin-x-small">{{itemKit.descricao}}</span>
								<span class="text-small text-gray">{{ text_qty }}
								</span>
								<span class="text-small text-bold text-dark">{{itemKit.quantidade}}</span>
							</div>
						</a>
					{% endfor %}
				{% endif %}

				{% if review_status %}
					<div class="flex between-xs middle-xs bottom-border-gray vertical-padding-medium top-margin-x-large bottom-margin-medium">
						<div class="top-padding-small">
							<span class="heading-2 vertical-middle bottom-padding-small right-margin-small">{{ reviews }}
								{{ tab_review }}</span>
							<div class="vertical-middle text-x-large bottom-padding-small">
								<i class="far fa-star active_star{{ rating }}"></i>
								<i class="far fa-star active_star{{ rating }}"></i>
								<i class="far fa-star active_star{{ rating }}"></i>
								<i class="far fa-star active_star{{ rating }}"></i>
								<i class="far fa-star active_star{{ rating }}"></i>
							</div>
						</div>
						<button class="btn-default btn-medium js-control-form-review">
							<span>Fazer uma avaliação</span>
						</button>
					</div>
					<div id="review"></div>
					<div class="overlay overlay-black-3 hidden" id="form-review" style="z-index: 111">
						<div class="shadow-small center-middle-fixed background-white padding-large rel" id="form-rating" style="width:100%;max-width:400px;">
							<button class="btn-default btn-white btn-small-square js-control-form-review margin-small abs" style="top:0;right:0;">
								<i class="fas fa-times"></i>
							</button>
							<span class="text-x-large text-dark visible-block bottom-margin-medium">Faça sua avaliação</span>
							<label class="field field-medium">
								<span class="field-label">{{ entry_name }}</span>
								<input class="field-entry" type="text" name="name" value="">
							</label>
							<label class="field field-medium vertical-margin-medium">
								<span class="field-label">{{ entry_review }}</span>
								<textarea class="field-entry" name="text" rows="6" style="resize: none"></textarea>
							</label>
							<label class="field field-medium vertical-margin-medium" id="field-rating">
								<label class="field-label">{{ entry_rating }}</label>
								<div>
									<label class="far fa-star text-x-large horizontal-padding-x-small">
										<input class="star-new-rating" type="radio" name="rating" value="1">
									</label>
									<label class="far fa-star text-x-large horizontal-padding-x-small">
										<input class="star-new-rating" type="radio" name="rating" value="2">
									</label>
									<label class="far fa-star text-x-large horizontal-padding-x-small">
										<input class="star-new-rating" type="radio" name="rating" value="3">
									</label>
									<label class="far fa-star text-x-large horizontal-padding-x-small">
										<input class="star-new-rating" type="radio" name="rating" value="4">
									</label>
									<label class="far fa-star text-x-large horizontal-padding-x-small">
										<input class="star-new-rating" type="radio" name="rating" value="5">
									</label>
								</div>
							</label>
							<label class="field field-medium bottom-margin-medium">
								<span class="field-label">{{ entry_captcha }}</span>
								<div class="flex nowrap-xs middle-xs">
									<div class="flex-grow-1">
										<input class="field-entry" type="text" class="captcha" name="captcha" value="">
									</div>
									<div>
										<img src="index.php?route=product/product/captcha" id="captcha" class="left-margin-small">
									</div>
								</div>
							</label>
							<div class="flex end-xs">
								<button type="button" class="btn-default btn-medium btn-outline js-control-form-review right-margin-small">
									<span>Cancelar</span>
								</button>
								<button type="button" class="btn-default btn-medium" id="button-review">
									<span>Enviar</span>
								</button>
							</div>
						</div>
					</div>
				{% endif %}

				{% if tags %}
					<div class="text-small text-gray top-margin-x-large top-padding-large">{{ text_tags }}</div>
					<div class="flex flex-row">
						{% for key, tag in tags %}
							<a href="{{ tag.href }}" class="btn-default btn-small btn-outline right-margin-x-small top-margin-x-small">
								<span>{{ tag.tag }}</span>
							</a>
						{% endfor %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
