<header class="header js-header">
	<div class="header__top">
		<div class="container-fluid">
			<div class="flex flex-row between-xs">
				<div class="flex flex-row">
					{% if main_menu_exibe_listaescolar %}
						<!-- Lista escolar -->
						<a href="{{ main_menu_link_listaescolar }}" class="header__top-text padding-small">
							<span class="visible-block text-small">{{ text_lista_escolar }}</span>
						</a>
					{% endif %}

					{% if has_gift_list %}
						<!-- Lista de presentes -->
						<a href="{{ url_gift_list }}" class="header__top-text padding-small">
							<span class="visible-block text-small">{{ text_gift }}</span>
						</a>
					{% endif %}

					{% if has_comparation_list %}
						<!-- Lista de comparação -->
						<a href="{{ url_comparation_list }}" class="header__top-text padding-small">
							<span class="visible-block text-small">
								{{ text_comparation }}
								<span class="js-total-comparation-list">({{ count_comparation_list }})</span>
							</span>
						</a>
					{% endif %}

					{% if customLinks %}
						{% for link in customLinks %}
							<a href="{{ link.link }}" target="_blank" class="header__top-text padding-small flex flex-row middle-xs">
								{% if link.icon %}
									{% if '/' in link.icon %}
										<img src="{{ link.icon }}" alt="" width="16" height="16" class="right-margin-x-small">
									{% else %}
										<i class="{{ link.icon }} text-small right-margin-x-small"></i>
									{% endif %}
								{% endif %}
								<span class="text-small">{{ link.text }}</span>
							</a>
						{% endfor %}
					{% endif %}
				</div>

				<div class="flex flex-row">
					{% for telephone in config_telephone %}
						{% if Type_Phone.Tp_Telefone == telephone.type %}
							<a href="tel:{{ telephone.number }}" target="_blank" class="header__top-text padding-small">
								<i class="fas fa-phone visible-inline-block text-small"></i>
								<span class="visible-inline-block text-small">{{ telephone.number }}</span>
							</a>
						{% endif %}
						{% if Type_Phone.Tp_Fax == telephone.type %}
							<div class="header__top-text padding-small">
								<i class="fas fa-fax visible-inline-block text-small"></i>
								<span class="visible-inline-block text-small">{{ telephone.number }}</span>
							</div>
						{% endif %}
						{% if Type_Phone.Tp_Whatsapp == telephone.type %}
							<a href="https://api.whatsapp.com/send?phone=55{{ telephone.only_number }}" target="_blank" class="header__top-text padding-small">
								<i class="fab fa-whatsapp visible-inline-block text-small"></i>
								<span class="visible-inline-block text-small">{{ telephone.number }}</span>
							</a>
						{% endif %}
						{% if Type_Phone.Tp_Celular == telephone.type %}
							<a href="tel:{{ telephone.number }}" target="_blank" class="header__top-text padding-small">
								<i class="fas fa-mobile-alt visible-inline-block text-small"></i>
								<span class="visible-inline-block text-small">{{ telephone.number }}</span>
							</a>
						{% endif %}
					{% endfor %}
				</div>

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

	<div class="header__main js-header__main">
		<div class="container-fluid vertical-padding-small">
			<div class="row middle-xs between-xs small-space-xs">

				<div class="col-xs-12 {{ header_logo_position == Type_HeaderLogoPosition.Left ? 'col-md-width-auto' : 'col-md-12' }}">
					<div class="flex flex-row nowrap-xs top-xs between-xs center-sm">
						<div class="header__main-text cursor-pointer padding-small hidden-sm-up right-margin-small js-header__main-menu">
							<i class="fas fa-bars visible-block text-x-large"></i>
						</div>
						{% if logo %}
							<a href="{{ url_home }}" title="{{ name }}" class="header__logo js-header__logo visible-block text-center horizontal-padding-small">
								<picture>
									{% if logo_responsivo %}
										<source media="(max-width: 768px)" srcset="{{ logo_responsivo.webp|replace({'%20': ' '}) }}">
										<source media="(max-width: 768px)" srcset="{{ c.jpg|replace({'%20': ' '}) }}">
										<div id="logo_responsivo" width="{{ logo_responsivo_width }}" height="{{ logo_responsivo_height }}" src="{{ logo_responsivo.jpg }}"></div>
									{% endif %}
									<div id="logo_original" width="{{ logo_original_width }}" height="{{ logo_original_height }}" src="{{ logo.jpg }}"></div>
									<source srcset="{{ logo.webp|replace({'%20': ' '}) }}">
									<img id="logo" src="{{ logo.jpg|replace({'%20': ' '}) }}" title="{{ name }}" alt="{{ name }}" itemprop="image" width="{{ logo_original_width }}" height="{{ logo_original_height }}">
								</picture>

								<picture style="visibility:hidden;">
									<source srcset="{{ logo_floating.webp|replace({'%20': ' '}) }}">
									<img src="{{ logo_floating.jpg|replace({'%20': ' '}) }}" title="{{ name }}" alt="{{ name }}">
								</picture>
							</a>
						{% endif %}
						<div class="header__main-text cursor-pointer padding-small hidden-sm-up left-margin-small js-header__search">
							<i class="fas fa-search visible-block text-x-large"></i>
						</div>
					</div>
				</div>

				<div class="col-xs-12 col-sm hidden-sm-down js-header__search-container">
					<div class="content-box rel">
						<label class="header__search-field js-form-search">
							<input type="text" name="search" class="header__search-entry js-header__search-entry" placeholder="{{ text_search }}" value="{{ search }}" autocomplete="off" disabled/>
							<button type="button" class="btn-default btn-small-square header__search-btn js-header__search-btn">
								<i class="fas fa-search" aria-hidden="true"></i>
							</button>
						</label>
						<div class="header__dropdown header__dropdown--left top-margin-x-small background-white border-gray full-width abs vertical-padding-small shadow-large hidden js-header__search-dropdown">
							<div class="js-header__search-suggestion">
								<span class="text-small text-gray text-center visible-block vertical-padding-small horizontal-padding-medium">
									Escreva algo para pesquisar...
								</span>
							</div>
						</div>
					</div>
				</div>

				<div class="col-xs-12 col-sm-width-auto">
					<div class="content-box rel flex flex-row nowrap-xs between-xs">
						<div class="header__main-text flex flex-row nowrap-xs middle-xs cursor-pointer padding-small right-padding-medium text-ellipsis js-header__dropdown">
							<i class="fas fa-user text-x-large"></i>
							<span class="text-medium left-margin-small text-ellipsis">{{ user_logged_in ? user_logged_in : 'Minha conta' }}</span>
							<i class="fas fa-angle-down text-small"></i>
						</div>
						<div class="header__dropdown header__dropdown--left background-white padding-medium border-gray abs hidden shadow-large">
							{% if is_logged_in %}
								{% if config.fidelity_status %}
									<a href="{{ url_resgatar_pontos }}" class="flex flex-row vertical-padding-small vertical-margin-x-small">
										<i class="fas fa-donate text-medium right-margin-medium"></i>
										<span class="text-medium">{{ text_redeem_points }}</span>
									</a>
								{% endif %}
								{% if config.fidelity_status %}
									<a href="{{ url_extractlist }}" class="flex flex-row vertical-padding-small vertical-margin-x-small">
										<i class="fas fa-receipt text-medium right-margin-medium"></i>
										<span class="text-medium">{{ text_stitch_extract }}</span>
									</a>
								{% endif %}
								<a href="{{ url_order }}" class="flex flex-row vertical-padding-small vertical-margin-x-small">
									<i class="fas fa-solid fa-box-open text-medium right-margin-medium"></i>
									<span class="text-medium">{{ text_order }}</span>
								</a>
								<a href="{{ url_account }}" class="flex flex-row vertical-padding-small vertical-margin-x-small">
									<i class="fas fa-user text-medium right-margin-medium"></i>
									<span class="text-medium">{{ text_account }}</span>
								</a>
								<a href="{{ url_log_out }}" class="flex flex-row vertical-padding-small vertical-margin-x-small">
									<i class="fas fa-sign-out-alt text-medium right-margin-medium"></i>
									<span class="text-medium">{{ text_log_out }}</span>
								</a>
							{% else %}
								<a href="{{ url_log_in_or_register }}" class="btn-default btn-medium btn-full bottom-margin-medium">
									<span>Entrar</span>
								</a>
								<a href="{{ url_log_in_or_register }}&page=register" class="visible-block vertical-padding-small vertical-margin-x-small text-medium text-center">
									<span class="text-dark">Cliente novo?</span>
									Cadastre-se
								</a>
							{% endif %}
						</div>
						{% if has_wish_list %}
							<a href="{{ url_wish_list }}" class="header__main-text flex flex-row nowrap-xs middle-xs cursor-pointer padding-small right-padding-medium">
								<i class="fas fa-heart text-x-large"></i>
								<span class="text-medium js-total-wish-list  notification-badge notification-badge-custom-color">{{ count_wish_list }}</span>
							</a>
						{% endif %}

						{% if is_bloked != true %}
							<div class="header__main-text flex flex-row nowrap-xs middle-xs cursor-pointer padding-small left-margin-small js-header__dropdown js-header__cart" display-facebook='{{ displayFacebookTrack }}' facebook-keys='{{ facebook_keys }}' facebook-total='{{ facebook_total }}'>
								<i class="{{ icon_cart }} text-x-large"></i>
								<span class="text-medium js-header__cart-total notification-badge notification-badge-custom-color">{{ qtd_items }}</span>
								<i class="fas fa-angle-down text-small"></i>
							</div>

							<div class="header__dropdown header__dropdown--right background-white padding-medium border-gray abs hidden shadow-large">
								{{ cart }}
							</div>
						{% else %}
							<div class="header__main-text flex flex-row nowrap-xs middle-xs cursor-pointer padding-small left-margin-smalls js-header__cart">
								<i class="{{ icon_cart }} text-x-large"></i>
								<span class="text-medium js-header__cart-total notification-badge notification-badge-custom-color">{{ qtd_items }}</span>
								<i class="fas fa-angle-down text-small"></i>
							</div>

							<div class="header__dropdown header__dropdown--right background-white padding-medium border-gray abs hidden shadow-large">
								{{ cart }}
							</div>
						{% endif %}
					</div>
				</div>

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

<style>
	.notification-badge-custom-color {
		background: {{notification_background}}
		;
		color: {{notification_color}}
		;
		border: 1.5px solid{{notification_color}};
	}
</style>
