<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 }}' data-table-parcels='{{ table_parcels }}'>
			<div class="product-list-container col-xs-12 col-md">
				<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="data_info.product_show_type == data_info.type_productshow.AsideSlide ? 'product-list-aside-slide' : 'flex center-xs'" id="product-content-image">
							{% if thumb %}
								<div id="main-video-content" class="hidden">
									<iframe id="main-video" frameborder="0" allow="autoplay"></iframe>
								</div>
								<div id="main-image-content" style="cursor:zoom-in;overflow:auto;">
									<img src="{{ thumb }}" id="main-image" :alt="data_info.productName" data-zoom-image="{{ popup }}" data-index="0" data-w="{{ image_popup_width }}" data-h="{{ image_popup_height }}">
								</div>
							{% endif %}

							{% if product_show_type == type_productshow.Slide %}
								<div class="top-margin-small" style="width: 95%;" ref="divCarousel" id="divCarousel">
									<base-carousel ref="carouselSlide" :options="slideSettings" :images="data_info.carousel" :videos="data_info.videos" :wg24tipozoomprod="data_info.typeZoom" :typezoom="data_info.types_zoom" :key="updateComponent"></base-carousel>
								</div>
							{% elseif product_show_type == type_productshow.AsideSlide %}
								<div class="top-margin-small" style="height: 95%;" ref="divCarousel" id="divCarousel">
									<base-carousel ref="carouselAside" :options="asideSlideSettings" :images="data_info.carousel" :videos="data_info.videos" :wg24tipozoomprod="data_info.typeZoom" :typezoom="data_info.types_zoom" :key="updateComponent"></base-carousel>
								</div>
							{% else %}
								<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>
							{% endif %}
						</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 codeProductPage %}
								({{ text_model }}
								{{ codeProductPage }})
							{% 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 }}
										{% if model == 'parcel' or model == 'complete' %}
											<base-popover :data="tableParcels" :is_admin="false"/>
										{% endif %}
									{% 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" style="position:relative"></div>
							</div>
						{% endif %}

					</div>
				</div>
			</div>

			<div class="col-xs-12">
				{% if description %}
					<div>
						<div @click="handleProductDescriptionClick" 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 @click="handleProductDescriptionClick" 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>
					{{ product_reviews }}
					<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 %}
					<base-card class="top-margin-medium rounded-small shadow-medium">
						<div class="padding-medium">
							<div class="text">
								<span class="text-dark left-margin-small">
									<i class="fa fa-tags" aria-hidden="true"></i>
									{{ text_tags }}
								</span>
							</div>
							<div class="flex flex-row top-margin-small line-text">
								{% for key, tag in tags %}
									<div class="tag-container tag-container-display">
										<a href="{{ tag.href }}" class="margin-small text-small">
											<span class="text-dark">{{ tag.tag }}</span>
											<div class="tag-slider"></div>
										</a>
									</div>
								{% endfor %}
							</div>
						</div>
					</base-card>
				{% endif %}
			</div>
		</div>
	</div>
</div>

