{% extends 'base/module.twig' %}

{% block content %}

	<div id="app" class="container-fluid">
		<div class="row">
			<div class="col-xs-8">
				<div class="content-box preview-container">

					<base-card>

						<div class="padding-large">
							<div v-show="Object.keys(selectedVisual).length !== 0" class="bottom-padding-large">
								<span class="text-large text-dark text-bold left-margin-large">Pré-visualização</span>
							</div>
							<div v-show="Object.keys(selectedVisual).length === 0" class="padding-x-small center">
								<span class="text-large text-gray">Escolha um item para personalizar</span>
							</div>

							{# Desenha a Barra de Pesquisa em Tempo Real pra ver as alterações #}
							<div v-show="selectedVisual === visual[0]" class="container-fluid vertical-padding-small">
								<div class="content-box">
									<div class="rel full-width visible-inline-block">
										<label class="search-bar-container" :style="'border-radius: ' + (configurations.searchbar_form == this['Type_SearchBarForm'].Retangular ? '0.25rem' : '30px' ) + ';'">
											<input type="text" name="search" autocomplete="off" placeholder="{{ text_search_placeholder }}" class="search-bar-input" :style="configurations.searchbar_form == this['Type_SearchBarForm'].Retangular ? '' : 'border-radius: 25px;'" style="padding: 0.75rem; border: 0" readonly/>
											<button type="button" class="btn-default btn-small-square" :style="'background-color: ' + (configurations.searchbar_button_background == this['Type_SearchBarButtonBackground'].Padrao ? wg24_header_btsearch : '#ffffff') + ';'
																																																																																																																																																																																																																																																																																																                                  + 'color: ' + (configurations.searchbar_button_background == this['Type_SearchBarButtonBackground'].Padrao ? wg24_icon_btnsearch_color : '#000000') + ';'
																																																																																																																																																																																																																																																																																																                                  + 'border-radius: ' + (configurations.searchbar_form == this['Type_SearchBarForm'].Retangular ? '0.25rem' : '30px' ) + ';'" style="position: absolute; top: 3px; right: 4px">
												<i class="fas fa-search" aria-hidden="true"></i>
											</button>
										</label>
									</div>
								</div>
							</div>

							{# Desenha o Box de Produtos em Tempo Real pra ver as alterações #}
							{# Manterei a maior parte do código mesmo usando valores fixos do produto, porque se um dia a gente for
																																																																																																																																																																								                colocar uma config nova, ja tem a regra pra alteração do visual #}
							<div v-show="selectedVisual === visual[1]" class="reset container-fluid" style="display: flex; justify-content: center">
								<div class="rel" :style="'max-width:' + (configurations.wg24_productbox_size == this['Type_Tamanho'].Tp_Grande ? '280px' : '225px')">
									<div :class="'item-column' +  (configurations.wg24_productbox_size == this['Type_Tamanho'].Tp_Grande ? ' item-column--large' : '' ) + ' no-padding'">
										<div :class="configurations.wg24_productbox_border == this['Type_DsimDnao'].Tp_Sim ? 'shadow-small' : ''" style="background-color: {{ wg24_product_bx_bgclr }}; border: 1px solid {{ wg24_product_bx_bdrclr }}; padding: 8px">
											<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 btn-wishlist" style="background: transparent; padding: 4px;">
														<i class="{{ (product.in_wishlist is defined and product.in_wishlist) ? 'fas' : 'far' }} fa-heart"></i>
													</button>
												{% endif %}
											</div>
											<div class="rel itembox-image-link full-width" {{ product.ratio }} style="background-color: red">
												<div class="itembox-tags">
													<div v-show="configurations.wg24_futura_prod_exibe_selo == this['Type_Status'].Tp_Habilitado" class="itembox-new-product">
														<span>{{ text_novo_selo }}</span>
													</div>
													{% if product.price %}
														{% if not product.aviseme %}
															{% if product.title_promotion %}
																<div v-show="configurations.wg24_l_sale_icon_style == 'square' && product.special" class="itembox-sale-label-title" style="color: {{ wg24_product_box_sale_nicontcolor }}; background-color: {{ wg24_product_box_sicon_bgcolor }}">
																	{{ product.title_promotion }}
																</div>
															{% endif %}
															<div v-show="product.special" class="itembox-sale-label {{ itembox_sale_label }}" style="color: {{ wg24_product_box_sale_nicontcolor }}; background-color: {{ wg24_product_box_sicon_bgcolor }}">
																{{ product.porcentagemDesconto }}
															</div>
														{% endif %}
													{% endif %}
												</div>

												{% if product.thumb %}
													<picture v-show="configurations.wg24_prod_efec_img == this['Type_EfeitoImagem'].Tp_Padrao">
														<source class="load-image" srcset="{{ product.thumb }}" data-src="{{ product.thumb }}">
														<img class="load-image full-width" src="{{ product.thumb }}" data-src="{{ product.thumb }}" alt="{{ product.name }}">
													</picture>

													<picture v-show="configurations.wg24_prod_efec_img == this['Type_EfeitoImagem'].Tp_MultiplasImgs">
														<source class="load-image" srcset="{{ product.thumb }}" data-src="{{ product.thumb }}">
														<img class="itembox-primary-image load-image full-width" src="{{ product.thumb }}" data-src="{{ product.thumb }}" alt="{{ product.name }}">
													</picture>
													<picture v-show="configurations.wg24_prod_efec_img == this['Type_EfeitoImagem'].Tp_MultiplasImgs">
														<source class="load-image" srcset="{{ product.image_extra }}" data-src="{{ product.image_extra }}">
														<img class="itembox-secondary-image load-image full-width" src="{{ product.image_extra }}" data-src="{{ product.image_extra }}" alt="{{ product.name }}">
													</picture>
												{% endif %}

												{% if not product.aviseme %}
													<button v-show="configurations.wg24_quick === this['Type_StatusEn'].Tp_Enable" type="button" class="btn-default btn-small-square shadow-medium itembox-btn-detail" style="
																																																																																																																																																																																																																																																																																																																																																																								                                background-color: {{ wg24_btn_1bg_col }};
																																																																																																																																																																																																																																																																																																																																																																								                                color: {{ wg24_btn_text_col }};
																																																																																																																																																																																																																																																																																																																																																																								                                position: absolute;">
														<i class="fas fa-search" aria-hidden="true"></i>
													</button>
												{% endif %}
											</div>

											<div class="itembox-content">
												<div class="itembox-inner">
													<span class="itembox-model" :style="'color:'+ wg24_l_linkc + '; font-size: 12px;'" v-text="text_code + product.model"></span>
													<h3 class="itembox-title {{ product.class_one_line }} box-product-name" style="color: {{ wg24_product_box_n_col }};">
														{{ product.name }}
													</h3>

													<div class="itembox-price full-width">
														<span class="itembox-single-price">
															{{ product.price }}
														</span>
													</div>
												</div>

												<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" data-fator="{{ product.fator_multiplicador }}" style="
																																																																																																																																																																																																																																																																																																																																																																																																																																																																								                                            display: -webkit-box;
																																																																																																																																																																																																																																																																																																																																																																																																																																																																								                                            display: -webkit-flex;
																																																																																																																																																																																																																																																																																																																																																																																																																																																																								                                            display: -ms-flexbox;
																																																																																																																																																																																																																																																																																																																																																																																																																																																																								                                            display: flex;
																																																																																																																																																																																																																																																																																																																																																																																																																																																																								                                            max-width: 100%;
																																																																																																																																																																																																																																																																																																																																																																																																																																																																								                                         ">
																		<button class="itembox-btn btn-down" type="button" style="color: {{ wg24_l_linkc }};">
																			<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" readonly/>
																		<button class="itembox-btn btn-up" type="button" style="color: {{ wg24_l_linkc }};">
																			<i aria-hidden="true" class="fas fa-plus"></i>
																		</button>
																	</div>
																{% else %}
																	<input type="hidden" name="quantity" size="2" value="{{ product.fator_multiplicador }}"/>
																{% endif %}

																<button type="button" class="itembox-btn btn-default btn-medium-square btn-cart" title="{{ text_buy }}" style="
																																																																																																																																																																																																																																																																																																																																																																																																																																																                                      background-color: {{ wg24_btn_1bg_col }};
																																																																																																																																																																																																																																																																																																																																																																																																																																																                                      color: {{ wg24_btn_text_col }};
																																																																																																																																																																																																																																																																																																																																																																																																																																																                                    ">
																	<i :class="configurations.icon_cart"></i>
																	<span>{{ (productBoxButton == typeProductBoxButton.Tp_QuantityAndButton) ? '' : text_buy }}</span>
																</button>

																{% if productBoxButton == typeProductBoxButton.Tp_QuantityAndButton %}
																	<span class="btn-cart-notification {% if product.notification_value %} have-in-cart{% endif %}"></span>
																{% endif %}
															</div>
														{% endif %}
													{% endif %}

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

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

							{# Icones #}
							<div v-show="selectedVisual === visual[2]" class="container-fluid vertical-padding-small">
								<span class="text-medium text-dark visible-block bottom-margin-x-small">Carrinho</span>
								<div class="padding-small visible-inline-block" style="color: {{ wg24_link_color_stick }}; background-color: {{ wg24_header_bg_color }};
																																																																																																																																																																																																																																																                            border: 1px solid grey; border-radius: 10px;">
									<i :class="'fas ' + configurations.icon_cart + ' text-x-large'"></i>
								</div>
							</div>

							{# Listas de Produtos #}
							<div v-show="selectedVisual === visual[3]" class="container-fluid vertical-padding-small">
								<span class="text-medium text-dark visible-block bottom-margin-small">Estilo do Título</span>
								<div class="horizontal-padding-medium vertical-padding-large" style="border: none; border-radius: 0.2rem; background-color: {{ wg24_l_bodyb }};">

									<div id="preview-style-title">
										<div class="flex flex-row nowrap-xs between-xs middle-xs center-xs rel">
											<div :class="configurations.product_list_title_style == this['Type_ProductListTitleStyle'].Left ? 'flex-1' : 'flex-1 text-center'">
												<h2 :class="configurations.product_list_title_style == this['Type_ProductListTitleStyle'].CenterWithLines ? ' product-list-title ' : ''">
													<span :style="
																																																																																																																																																																																																																																																																																																																																																																								                                  [
																																																																																																																																																																																																																																																																																																																																																																								                                    {'fontSize' : 1.5+'rem',
																																																																																																																																																																																																																																																																																																																																																																								                                     'color' : configurations.product_list_title_color},
																																																																																																																																																																																																																																																																																																																																																																								                                    configurations.product_list_title_typhography_style == this['Type_ProductListTypography'].Bold ?
																																																																																																																																																																																																																																																																																																																																																																								                                    {'fontWeight': 'bold'} : '',
																																																																																																																																																																																																																																																																																																																																																																								                                    configurations.product_list_title_typhography_style == this['Type_ProductListTypography'].Normal ?
																																																																																																																																																																																																																																																																																																																																																																								                                    {'fontWeight': 'normal'} : '',
																																																																																																																																																																																																																																																																																																																																																																								                                    configurations.product_list_title_typhography_style == this['Type_ProductListTypography'].Italic ?
																																																																																																																																																																																																																																																																																																																																																																								                                    {'fontWeight': 'normal', 'fontStyle': 'italic'} : '',
															
																																																																																																																																																																																																																																																																																																																																																																								                                    configurations.product_list_font_style == this['Type_ProductListFont'].Google ?
																																																																																																																																																																																																																																																																																																																																																																								                                    {'fontFamily': configurations.product_list_font_google_style} : {'fontFamily': configurations.product_list_font_system_style},
																																																																																																																																																																																																																																																																																																																																																																								                                  ]
																																																																																																																																																																																																																																																																																																																																																																								                                ">
														TÍTULO
													</span>
												</h2>
												<h3 class="heading-3 top-margin-x-small ">
													<span :style="
																																																																																																																																																																																																																																																																																																																																																                                  [
																																																																																																																																																																																																																																																																																																																																																                                    {'fontSize' : 1+'rem',
																																																																																																																																																																																																																																																																																																																																																                                     'color' : configurations.product_list_subtitle_color},
														
																																																																																																																																																																																																																																																																																																																																																                                    configurations.product_list_subtitle_typhography_style == this['Type_ProductListTypography'].Bold ?
																																																																																																																																																																																																																																																																																																																																																                                    {'fontWeight': 'bold'} : '',
																																																																																																																																																																																																																																																																																																																																																                                    configurations.product_list_subtitle_typhography_style == this['Type_ProductListTypography'].Normal ?
																																																																																																																																																																																																																																																																																																																																																                                    {'fontWeight': 'normal'} : '',
																																																																																																																																																																																																																																																																																																																																																                                    configurations.product_list_subtitle_typhography_style == this['Type_ProductListTypography'].Italic ?
																																																																																																																																																																																																																																																																																																																																																                                    {'fontWeight': 'normal', 'fontStyle': 'italic'} : '',
														
																																																																																																																																																																																																																																																																																																																																																                                    configurations.product_list_font_style == this['Type_ProductListFont'].Google ?
																																																																																																																																																																																																																																																																																																																																																                                    {'fontFamily': configurations.product_list_font_google_style} : {'fontFamily': configurations.product_list_font_system_style},
																																																																																																																																																																																																																																																																																																																																																                                  ]
																																																																																																																																																																																																																																																																																																																																																                                ">SUBTÍTULO DE EXEMPLO</span>
												</h3>
											</div>
										</div>
									</div>
								</div>
								<label class="checkbox checkbox-large">
									<input type="checkbox" name="product_list_show_subtitle" class="checkbox-entry" value="0" checked @change="toogleProductListSubtitle">
									<span class="checkbox-text">Visualizar com o subtítulo</span>
								</label>
							</div>

							{# Cabeçalho #}
							<div v-show="selectedVisual === visual[4]" class="container-fluid vertical-padding-small">
								<span class="text-medium text-dark visible-block bottom-margin-x-small">Posição do logo</span>
								<div class="vertical-padding-medium horizontal-padding-medium" style="border: 1px solid grey; background-color: {{ wg24_l_bodyb }};">
									<div>
										<div class="row middle-xs between-xs small-space-xs">
											<div :class="'col-xs-12 ' + (configurations.header_logo_position == this['Type_HeaderLogoPosition'].Left ? 'col-md-width-auto' : 'col-md-12 center')">
												<picture>
													<img src="{{ logo|replace({'%20': ' '}) }}" height="40">
												</picture>
											</div>
											<div class="col-xs-12 col-sm hidden-sm-down border-gray">
												<span class="visible-block center" style="color: {{ wg24_l_header_color }}">Barra de Pesquisa</span>
											</div>
											<div class="col-xs-12 col-sm-width-auto border-gray left-margin-small">
												<span class="visible-block center" style="color: {{ wg24_l_header_color }}">Conta e carrinho</span>
											</div>
										</div>
									</div>
								</div>
							</div>

							{# Carrinho de Compras #}
							<div v-show="selectedVisual === visual[5]" class="container-fluid vertical-padding-small">
								<div class=" rel padding-large col-xs-12 col-sm-9 col-md-6" style="background-color: {{ wg24_product_bx_bgclr }};
																																																																																																																																																																																																																																																                           border: 1px solid {{ wg24_product_bx_bdrclr }};">
									<button v-if="configurations.cart_continue_button == this['Type_Status'].Tp_Habilitado" type="button" title="{{ text_button_continue }}" class="bottom-margin-medium btn-default btn-large btn-full" style="background-color: {{ wg24_btn_1bg_col }}; color: {{ wg24_btn_text_col }};">
										<span>{{ text_button_continue }}</span>
									</button>

									<button type="button" title="{{ text_button_checkout }}" class="btn-default btn-large btn-full" style="background-color: {{ wg24_finalizar_carrinho }} ; color: {{ wg24_finalizar_carrinho_texto }};">
										<span>{{ text_button_checkout }}</span>
									</button>

								</div>
							</div>

							{# Menu Principal #}
							<div v-show="selectedVisual === visual[6]" class="container-fluid vertical-padding-small">
								<div class="content-box">
									<div class="rel full-width visible-inline-block" style="background-color: {{ wg24_product_bx_bgclr }};">

										<nav class="menu js-menu no-margin" style="background-color: {{ wg24_mm_bgcol }}">
											<div class="menu__mask js-menu__mask" @click="() => document.querySelector('.js-menu').classList.remove('menu--open')"></div>

											<div
												class="menu__wrapper js-menu__wrapper between-xs " :style="(configurations.menu_position != this['Type_MenuPosition'].Full ? 'max-width: 500px;' : '')">

												<!-- Controle do slider -->
												<div class="menu__item menu__item--prev js-menu__item--prev" @click="prevMenu" :style="((configurations.menu_divider == this['Type_StatusEn'].Tp_Enable) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
													<div class="menu__content">
														<i class="menu__icon fas fa-angle-left"></i>
													</div>
												</div>

												<div class="menu__container js-menu__container" :style="((configurations.menu_divider == this['Type_StatusEn'].Tp_Enable) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">


													<div v-if="configurations.wg24_main_menu_link_home == this['Type_StatusEn'].Tp_Enable" class="menu__item js-menu__item" :style="((configurations.menu_divider == this['Type_StatusEn'].Tp_Enable) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
														<a class="menu__content" href="" @click="(e) => e.preventDefault()" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none', }">
															<i v-if="configurations.wg24_main_menu_link_home_display == this['Type_MenuLinkHomeDisplay'].Icon" class="menu__icon fas fa-home hidden-sm-down"></i>
															<span v-else class="menu__text">
																Página inicial
															</span>
														</a>
													</div>

													<div v-if="configurations.wg24_main_menu_departamentos == this['Type_StatusEn'].Tp_Enable" class="menu__item js-menu__item" :style="((configurations.menu_divider == this['Type_StatusEn'].Tp_Enable) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
														<div class="menu__content menu__content--departments" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none'}">
															<span :class="configurations.menu_selector_indicator == this['Type_SelectionIndicators'].Underline && configurations.menu_selector == this['Type_StatusEn'].Tp_Enable ? 'menu__text menu__underline' : 'menu__text'">{ configurations.wg24_main_menu_departamentos_text || "Departamentos" }</span>
															<i v-if="configurations.menu_selector_indicator == this['Type_SelectionIndicators'].Arrow && configurations.menu_selector == this['Type_StatusEn'].Tp_Enable" class="menu__icon menu__icon--desktop fas fa-angle-down"></i>
														</div>

														<div class="submenu js-submenu submenu--departments">
															<div v-for="item in departamentos">
																<a :class="configurations.menu_style_subcategory == this['Type_MenuSubCategory'].Any ? 'submenu__item submenu__item--full' : 'submenu__item submenu__item--full submenu__list'" href="" @click="(e) => e.preventDefault()" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none'}">
																	<span class="submenu__text submenu__text--second">{ item.name }</span>
																</a>
															</div>
														</div>

													</div>

													<div v-for="(category, index) in categories" class="menu__item js-menu__item" :style="((index < categories.length && configurations.menu_divider == this['Type_StatusEn'].Tp_Enable) ? ('border-right: 1px solid ' + wg24_mainm_brcol + ';') : '')">
														<a class="menu__content" href="" @click="(e) => e.preventDefault()" :style="{'color': wg24_menum_lcolor, 'text-decoration': 'none'}">
															<span :class="configurations.menu_selector_indicator == this['Type_SelectionIndicators'].Underline && configurations.menu_selector == this['Type_StatusEn'].Tp_Enable ? 'menu__text menu__underline' : 'menu__text'">{ category.name }</span>
															<i v-if="configurations.menu_selector_indicator == this['Type_SelectionIndicators'].Arrow && configurations.menu_selector == this['Type_StatusEn'].Tp_Enable" class="menu__icon menu__icon--desktop fas fa-angle-down"></i>
														</a>

														<div class="submenu js-submenu">
															<div v-if="configurations.wg24_exibe_imagens_categorias_menu == this['Type_DsimDnao'].Tp_Sim" class="submenu__showcase" style="max-height: 9rem; max-width: 250px">
																<img :src="category.image" class="submenu__image" :style="{ 'max-height': '9rem',
																																																																																																																																																																																																																																																																																																																																																																																																                                         'max-width': '250px',
																																																																																																																																																																																																																																																																																																																																																																																																                                         'width': Math.round((500/1140) * configurations.wg24_largura_imagens_categorias) + 'px',
																																																																																																																																																																																																																																																																																																																																																																																																                                          'height': Math.round((500/1140) * configurations.wg24_altura_imagens_categorias) + 'px'}">
															</div>
															<div class="submenu__content js-submenu__content">
																<div class="submenu__item submenu__item--back js-submenu__item--back">
																	<i class="submenu__icon fas fa-angle-left"></i>
																	<span class="submenu__text submenu__text--third">voltar</span>
																</div>
																<a class="submenu__item submenu__item--header" href="" @click="(e) => e.preventDefault()" style="text-decoration: none;">
																	<span class="submenu__text submenu__text--first">{ category.name }</span>
																</a>

																<div v-for="children in category.children">
																	<a :class="configurations.menu_style_subcategory == this['Type_MenuSubCategory'].Any ? 'submenu__item' : 'submenu__item submenu__list'" href="" @click="(e) => e.preventDefault()" style="text-decoration: none;">
																		<span class="submenu__text submenu__text--second">{ children.name }</span>
																	</a>
																</div>

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

												<!-- Controle do slider -->
												<div class="menu__item menu__item--next js-menu__item--next" @click="nextMenu">
													<div class="menu__content">
														<i class="menu__icon fas fa-angle-right"></i>
													</div>
												</div>

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

							{# Listas de Categorias #}
							<div v-show="selectedVisual === visual[7]" class="container-fluid vertical-padding-small">
								<div class="horizontal-padding-medium vertical-padding-large" style="border: none; border-radius: 0.2rem; background-color: {{ wg24_l_bodyb }};">
									<div class="list-categorie-header">
										<div class="list-categorie-menu-item-logo"></div>
										<div class="list-categorie-menu-item-search"></div>
										<div class="list-categorie-menu-item">
											<div class="list-categorie-menu-icon"></div>
											<div class="list-categorie-menu-text"></div>
										</div>
										<div class="list-categorie-menu-item-login">
											<div class="list-categorie-menu-icon"></div>
											<div class="list-categorie-menu-text"></div>
										</div>
										<div class="list-categorie-menu-item-login">
											<div class="list-categorie-menu-icon"></div>
											<div class="list-categorie-menu-text"></div>
										</div>
									</div>
									<div class="list-categorie-nav">
										<div class="list-categorie-nav-item"></div>
										<div class="list-categorie-nav-item"></div>
										<div class="list-categorie-nav-item"></div>
										<div class="list-categorie-nav-item"></div>
										<div class="list-categorie-nav-item"></div>
										<div class="list-categorie-nav-item"></div>
									</div>
									<div class="list-categorie-container">
										<div class="list-categorie-aside">
											<div class="list-categorie-filter">
												<div class="list-categorie-filter-item"></div>
											</div>
											<div class="list-categorie-filter">
												<div class="list-categorie-filter-item"></div>
											</div>
										</div>
										<div class="list-categorie-content">
											<div class="list-categorie-image"></div>
											<div class="list-categorie-title">
												<div class="list-categorie-title-text"></div>
												<div class="list-categorie-title-options"></div>
											</div>
											<div class="list-categorie-itens">
												<div class="list-categorie-item"></div>
												<div class="list-categorie-item"></div>
												<div class="list-categorie-item"></div>
												<div class="list-categorie-item"></div>
												<div class="list-categorie-item"></div>
												<div class="list-categorie-item"></div>
											</div>
										</div>
									</div>
								</div>
							</div>

							{#Página de Produto#}
							<div v-show="selectedVisual === visual[8]" class="container-fluid">
								<div class="horizontal-padding-medium vertical-padding-medium" style="border: none; border-radius: 0.2rem; background-color: {{ wg24_l_bodyb }};">
									<div class="product-show-content">
										<div class="product-show-content-image">
											<div class="product-show-slide-content">
												<div style="cursor:zoom-in;" class="product-show-image-main" @click="handleMainImageClick">
													<img id="main-image" data-index="0" :src="configurations.product_show_type == Type_ProductShow.AsideSlide ? productShowAsideSlide.image : productShowSlide.image ?? productShowGrid.image" alt="imagem do produto" :data-zoom-image="configurations.product_show_type == Type_ProductShow.AsideSlide ? productShowAsideSlide.image : productShowSlide.image ?? productShowGrid.image" data-index="0" data-w="{{ image_popup_width }}" data-h="{{ image_popup_height }}">
												</div>
												<div class="product-show-grid" v-if="configurations.product_show_type == Type_ProductShow.Grid">
													<a v-for="(productShow, key) in productShowGrid.children" rel="group" :href="productShow" :key="key" @click="handleProductShowClick('image' + key)" class="js-thumbnail">
														<img class="product-show-image-child" :src="productShow" :ref="'image' + key" :alt="'imagem de exemplo ' + key">
													</a>
												</div>
												<div v-if="configurations.product_show_type == Type_ProductShow.Slide">
													<base-carousel :is_admin="true" :options="slideSettings" ref="carousel" :data="productShowSlide.children" :wg24tipozoomprod="configurations.wg24_tipo_zoom_prod" :typezoom="Type_TipoZoom" :key="updateComponent"></base-carousel>
												</div>

												<div class="vertical-padding-large" v-if="configurations.product_show_type == Type_ProductShow.AsideSlide">
													<base-carousel :is_admin="true" :options="asideSlideSettings" :data="productShowAsideSlide.children" :wg24tipozoomprod="configurations.wg24_tipo_zoom_prod" :typezoom="Type_TipoZoom" :key="updateComponent"></base-carousel>
												</div>
											</div>
										</div>
										<div class="product-show-price">
											<h4 class="heading-1 text-break-word" style="color: #0D0D0D; font-size: 1.6rem">PRODUTO DE EXEMPLO - FUTURA SISTEMAS</h4>
											<p class="top-margin-x-small" style="font-size: 1rem; color: #666666">(Cód. item 9723618) Esgotado | Outros produtos FUTURA</p>
											<div class="vertical-middle text-medium top-margin-x-small">
												<i class="far fa-star active_star0"></i>
												<i class="far fa-star active_star0"></i>
												<i class="far fa-star active_star0"></i>
												<i class="far fa-star active_star0"></i>
												<i class="far fa-star active_star0"></i>
												<span class="text-medium text-gray">(0)</span>
											</div>
											<div class="vertical-middle top-margin-small">
												<span style="background-color: rgb(59, 89, 152); border-radius: 0px;">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-facebook-1" class="at-icon at-icon-facebook" style="fill: rgb(255, 255, 255); width: 16px; height: 16px;">
														<title id="at-svg-facebook-1">Facebook</title>
														<g>
															<path d="M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z" fill-rule="evenodd"></path>
														</g>
													</svg>
												</span>
												<span style="background-color: rgb(29, 161, 242); border-radius: 0px;">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-twitter-2" class="at-icon at-icon-twitter" style="fill: rgb(255, 255, 255); width: 16px; height: 16px;">
														<title id="at-svg-twitter-2">Twitter</title>
														<g>
															<path d="M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336" fill-rule="evenodd"></path>
														</g>
													</svg>
												</span>
												<span style="background-color: rgb(77, 194, 71); border-radius: 0px;">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-whatsapp-3" class="at-icon at-icon-whatsapp" style="fill: rgb(255, 255, 255); width: 16px; height: 16px;">
														<title id="at-svg-whatsapp-3">WhatsApp</title>
														<g>
															<path d="M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>
														</g>
													</svg>
												</span>
												<span style="background-color: rgb(132, 132, 132); border-radius: 0px;">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-email-4" class="at-icon at-icon-email" style="fill: rgb(255, 255, 255); width: 16px; height: 16px;">
														<title id="at-svg-email-4">Email</title>
														<g>
															<g fill-rule="evenodd"></g>
															<path d="M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z"></path>
															<path d="M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z"></path>
														</g>
													</svg>
												</span>
												<span style="background-color: rgb(203, 32, 39); border-radius: 0px;">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-pinterest_share-5" class="at-icon at-icon-pinterest_share" style="fill: rgb(255, 255, 255); width: 16px; height: 16px;">
														<title id="at-svg-pinterest_share-5">Pinterest</title>
														<g>
															<path d="M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z" fill-rule="evenodd"></path>
														</g>
													</svg>
												</span>
												<span style="background-color: rgb(255, 101, 80); border-radius: 0px;">
													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" version="1.1" role="img" aria-labelledby="at-svg-addthis-6" class="at-icon at-icon-addthis" style="fill: rgb(255, 255, 255); width: 16px; height: 16px;">
														<title id="at-svg-addthis-6">AddThis</title>
														<g>
															<path d="M18 14V8h-4v6H8v4h6v6h4v-6h6v-4h-6z" fill-rule="evenodd"></path>
														</g>
													</svg>
												</span>
											</div>
											<div id="price" class="top-margin-large left-margin-small">
												<span style="color: false; display:block;font-weight: 700;font-size: 1.6rem;line-height: 2rem;color: #666666;">R$ 99,99</span>
												<span style="color: #737373; display:block;font-size: 1rem;line-height: 1rem;">R$ 99,99 no boleto à vista</span>
											</div>
											<div class="top-margin-small left-margin-small top-padding-medium" style="color: #f00; font-size: 1rem; font-weight: bold">
												Produto esgotado
											</div>
											<div class="top-margin-medium left-margin-small">
												<button style="height: 40px; background-color: #303030; color: white; border-radius: 0.25rem" class="btn-cart dark horizontal-padding-large" type="button">Avise-me</button>
											</div>
										</div>
									</div>
									<div class="padding-medium">
										<div style="color: #0D0D0D; font-size: 1.2rem" class="flex between-xs middle-xs bottom-border-gray bottom-padding-small bottom-margin-small
																																																																																																														              							js-toggle-product-description cursor-pointer" @click="toogleProductDescription">
											DESCRIÇÂO
											<i class="fas fa-plus js-product-description-plus"></i>
											<i class="fas fa-minus hidden js-product-description-minus"></i>
										</div>
										<div class="reset-product-description clearfix js-product-description-container hidden" style="color: #666666; font-size: 1rem;">
											<p>Ferro a Vapor Arno Ultragliss TM54 . Fácil e rápido em deslizamento. A linha Arno Ultragliss é a número 1 em deslizamento, graças à Tecnologia Exclusiva de sua Base Durilium Airglide. Feita de material vitrocerâmico, possui altíssima resistência a riscos e arranhões, não deixa brilho nos tecidos e possui longa durabilidade. São várias saídas de vapor ativas, vapor extra de até 90g/min, vapor vertical para desamassar cortinas e roupas direto do cabide, Spray para remover vincos dificeis e Sistema de Autolimpeza, que elimina os resíduos no reservatório de água.</p>
										</div>
									</div>
									<div class="padding-medium" id="div_wg24_l_custom_tab">
										<div style="color: #0D0D0D;" class="flex between-xs middle-xs bottom-border-gray bottom-padding-small bottom-margin-small
																																																																																																														              							js-toggle-product-description cursor-pointer" @click="toogleProductDescription">
											<span style="font-size: 1.2rem; font-weight: 500;" v-text="configurations.wg24_l_tab_title"></span>
											<i class="fas fa-plus js-product-description-plus"></i>
											<i class="fas fa-minus hidden js-product-description-minus"></i>
										</div>
										<div class="reset-product-description clearfix js-product-description-container hidden" style="color: #666666; font-size: 1rem;" ref="tabPersonalized">
											<div id="tabPersonalized" ref="tabPersonalized"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</base-card>
				</div>
			</div>
			<div class="col-xs-4">
				<div class="content-box">
					<base-card>
						<div v-show="Object.keys(selectedVisual).length === 0" class="vertical-padding-small">
							<div v-for="(item, index) in visual" class="flex flex-row between-xs middle-xs text-medium text-dark padding-medium cursor-pointer hover:background-gray" @click="selectedVisual = item" :key="item.group">
								<span class="text-medium text-dark text-bold">{item.group}</span>
								<i class="fas fa-chevron-right"></i>
							</div>
						</div>

						<div v-show="Object.keys(selectedVisual).length > 0">
							<div class="flex flex-row middle-xs bottom-border-gray padding-x-small">
								<base-button apperance="white" square @click.native="selectedVisual = {}">
									<i class="fas fa-chevron-left"></i>
								</base-button>
								<span class="text-medium text-dark text-bold left-margin-small">{selectedVisual.group}</span>
							</div>

							<div class="padding-large">
								<validation-provider tag="div" v-for="(field, index) in selectedVisual.fields" :key="index" class="bottom-margin-large" :name="field.name" :rules="field.rules" v-slot="{ errors, valid }">

									<div v-if="['select'].includes(field.type)">
										<base-select :name="field.name" :id="field.name" :label="field.label" :ref="field.name" :description="field.description" :valid="valid" :error="errors[0]" :disabled="disableForm" v-model="configurations[field.name]">
											<option v-for="(value, key) in  getTypeEnumList(`${field.name}`, `${field.options}`, `${field.customOptions}`)  " :value="key">{ value }
											</option>
										</base-select>
									</div>

									<div v-else-if="['color'].includes(field.type)">
										<base-input :key="field.name" :type="field.type" :name="field.name" :class="field.name" :ref="field.name" :id="field.name" :label="field.label" :mask="field.mask" :valid="valid" :error="errors[0]" :disabled="disableForm" v-model="configurations[field.name]"></base-input>
									</div>

									<div v-else-if="['ckeditor'].includes(field.type)">
										<label class="field field-medium" :ref="field.name">
											<span v-text="field.label" class="field-label"></span>
											<span class="field-description" v-text="field.description"></span>
											<div :class="errors[0] ? 'error-ckeditor-border' : ''">
												<textarea :name="field.name" :id="field.name"></textarea>
											</div>
											<span class="error-ckeditor top-margin-medium" v-text="errors[0]"></span>
										</label>
									</div>

									<div v-else>
										<base-input :key="field.name" :type="field.type" :name="field.name" :ref="field.name" :id="field.name" :label="field.label" :description="field.description" :mask="field.mask" :valid="valid" :error="errors[0]" :disabled="disableForm" v-model="configurations[field.name]"></base-input>
									</div>

								</validation-provider>
							</div>
						</div>
					</base-card>
				</div>
			</div>
		</div>
	</div>

	<!-- Root element of PhotoSwipe. Must have class pswp. -->
	<div
		class="pswp" tabindex="-1" role="dialog" aria-hidden="true" v-if="configurations.wg24_tipo_zoom_prod != Type_ProductShow.Tp_Fancybox">
		<!-- Background of PhotoSwipe.
																											    Its a separate element, as animating opacity is faster than rgba(). -->
		<div class="pswp__bg"></div>

		<!-- Slides wrapper with overflow:hidden. -->
		<div
			class="pswp__scroll-wrap">

			<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
			<div
				class="pswp__container">
				<!-- dont modify these 3 pswp__item elements, data is added later on -->
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
			</div>

			<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
			<div class="pswp__ui pswp__ui--hidden">

				<div
					class="pswp__top-bar">

					<!--  Controls are self-explanatory. Order can be changed. -->

					<div class="pswp__counter"></div>

					<button type="button" class="pswp__button pswp__button--close" title="Fechar (Esc)"></button>

					<button type="button" class="pswp__button pswp__button--share" title="Compartilhar"></button>

					<button type="button" class="pswp__button pswp__button--fs" title="Alternar para o modo tela cheia"></button>

					<button type="button" class="pswp__button pswp__button--zoom" title="Zoom aumentar/diminuir"></button>

					<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
					<!-- element will get class pswp__preloader--active when preloader is running -->
					<div class="pswp__preloader">
						<div class="pswp__preloader__icn">
							<div class="pswp__preloader__cut">
								<div class="pswp__preloader__donut"></div>
							</div>
						</div>
					</div>
				</div>

				<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
					<div class="pswp__share-tooltip"></div>
				</div>

				<button type="button" class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>

				<button type="button" class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

				<div class="pswp__caption">
					<div class="pswp__caption__center"></div>
				</div>

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


{% endblock %}
