<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.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="{{ logo_responsivo.jpg|replace({'%20': ' '}) }}"
                  >
                {% endif %}
                <source srcset="{{ logo.webp|replace({'%20': ' '}) }}">
                <img
                  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-sticky-note 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 %}
            <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">
              <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>
          </div>
        </div>

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

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