{% assign color = color | default: "#3d0456" %}
{% assign text_en_US = text_en_US | default: "" %}
{% assign text_es = text_es | default: "" %}
{% assign text_fr = text_fr | default: "" %}
{% assign text_de = text_de | default: "" %}
{% assign text_en_GB = text_en_GB | default: "" %}
{% assign text_nl = text_nl | default: "" %}
{% assign text_pt_BR = text_pt_BR | default: "" %}
{% assign button_text_en_US = button_text_en_US | default: "" %}
{% assign button_text_es = button_text_es | default: "" %}
{% assign button_text_fr = button_text_fr | default: "" %}
{% assign button_text_de = button_text_de | default: "" %}
{% assign button_text_en_GB = button_text_en_GB | default: "" %}
{% assign button_text_nl = button_text_nl | default: "" %}
{% assign button_text_pt_BR = button_text_pt_BR | default: "" %}
{% assign button_link = button_link | default: "" %}
{% assign text_color = text_color | default: "white" %}
{% assign subtitle_en_US = subtitle_en_US | default: "" %}
{% assign subtitle_es = subtitle_es | default: "" %}
{% assign subtitle_fr = subtitle_fr | default: "" %}
{% assign subtitle_de = subtitle_de | default: "" %}
{% assign subtitle_en_GB = subtitle_en_GB | default: "" %}
{% assign subtitle_nl = subtitle_nl | default: "" %}
{% assign subtitle_pt_BR = subtitle_pt_BR | default: "" %}

<header class="np-header" style="background-color: {{ color }};">
  <div class="np-header-content">
    <div class="np-hidden-desktop np-header-mobile-menu-nav">
      {% if current_person.signed_in? %}
        <button
          data-toggle-class="np-hidden"
          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
          data-toggle-target=".np-header-mobile-avatar-menu,
          .np-header-mobile-menu-content, .np-main, .np-footer">
</button>
        <button
          data-test="open-mobile-menu"
          data-toggle-class="np-hidden"
          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
          <img
            alt="{{ current_person.name }}"
            class="np-header-avatar-image"
            src="{{ current_person.avatar_url }}" />
        </button>
      {% endif %}
    </div>
    {% if current_school.logo_url %}
      <h1 class="np-header-logo">
        <a href="{% route home %}">
          {% if text_color == "white" %}
            <img
              alt="{{ current_school.name }}"
              class="np-header-logo-image"
              src="{{ current_school.logo_url }}" />
          {% else %}
            <img
              alt="{{ current_school.name }}"
              class="np-header-logo-image"
              src="https://s3.us-east-1.amazonaws.com/static.northpass.com/nintex/logo/na_logo_alt.png" />
          {% endif %}
        </a>
      </h1>
    {% else %}
      <h1>
        <a href="{% route home %}" class="np-school-name np-header-font-color">
          {{ current_school.name }}
        </a>
      </h1>
    {% endif %}

    <div class="np-hidden-mobile np-header-desktop-nav">
      <ul class="np-header-desktop-nav-list">
        {% for website_navigation in navigations.header_navigations_external %}
          <li class="np-header-desktop-nav-item">
            <a
              href="{{ website_navigation.path }}"
              class="np-header-desktop-nav-link np-header-font-color"
              target="_blank">
              {{ website_navigation.name }}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class=" ql-hidden-mobile" style="flex-grow: 1;">
      {% include "nintex_quicklinks"
        , text_color: text_color
        , verticalPadding: "0 4%" %}
    </div>
    {% if current_person.signed_in? %}
      {% if features.commerce? %}
        <a class="np-hidden-mobile np-header-button np-header-button-cart" href="{% route cart %}">
          <i class="np-header-button-icon far fa-shopping-cart"></i>
          {% t.cart %}
          {% commerce_cart_badge %}
        </a>
      {% endif %}
      <div class="np-hidden-mobile np-header-search np-header-search-expanded">
        <form
          action="{% route search %}"
          method="get"
          data-test="desktop-search">
          <input
            aria-label="{% t .search %}"
            class="header-search-input lang-en-US"
            type="text"
            name="q"
            placeholder="{% t .search %}" />
          <input
            aria-label="Buscar"
            class="header-search-input lang-es"
            type="text"
            name="q"
            placeholder="Buscar" />
          <input
            aria-label="Rechercher"
            class="header-search-input lang-fr"
            type="text"
            name="q"
            placeholder="Rechercher" />
          <input
            aria-label="Suchen"
            class="header-search-input lang-de"
            type="text"
            name="q"
            placeholder="Suchen" />
          <input
            aria-label="Search"
            class="header-search-input lang-en-GB"
            type="text"
            name="q"
            placeholder="Search" />
          <input
            aria-label="Zoeken"
            class="header-search-input lang-nl"
            type="text"
            name="q"
            placeholder="Zoeken" />
          <input
            aria-label="Pesquisar"
            class="header-search-input lang-pt-BR"
            type="text"
            name="q"
            placeholder="Pesquisar" />
          <i class="np-header-search-icon far fa-search"></i>
        </form>
      </div>
      <div class="np-hidden-mobile np-header-avatar">
        <button
          class="np-header-avatar-button"
          data-test="open-desktop-menu"
          data-toggle-class-on-target="np-hidden"
          data-toggle-target=".np-header-avatar-tooltip"
          data-toggle-outside>
          <img
            alt="{{ current_person.name }}"
            class="np-header-avatar-image"
            src="{{ current_person.avatar_url }}">
        </button>
        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
          <span class="np-header-avatar-tooltip-arrow-up"></span>
          <div class="np-header-avatar-tooltip-learner">
            <div class="np-header-avatar-tooltip-learner-name">
              {{ current_person.name }}
            </div>
            <div class="np-header-avatar-tooltip-learner-email">
              {{ current_person.email }}
            </div>
          </div>

          <nav class="np-header-avatar-tooltip-navigation">
            {% unless current_school.sso_active? %}
              <a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
                <span class="lang-en-US">
                  {% t.profile_settings %}
                </span>
                <span class="lang-es">
                  Configuración de perfil
                </span>
                <span class="lang-fr">
                  Paramètres du profil
                </span>
                <span class="lang-de">
                  Profil Einstellungen
                </span>
                <span class="lang-en-GB">
                  Profile Settings
                </span>
                <span class="lang-nl">
                  Profielinstellingen
                </span>
                <span class="lang-pt-BR">
                  Configurações de perfil
                </span>
              </a>
            {% endunless %}
            {% if current_person.signed_in? %}
              <a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
                <span class="lang-en-US">
                  {% t.transcript %}
                </span>
                <span class="lang-es">
                  Transcripción
                </span>
                <span class="lang-fr">
                  Transcription
                </span>
                <span class="lang-de">
                  Transkript
                </span>
                <span class="lang-en-GB">
                  Transcript
                </span>
                <span class="lang-nl">
                  Afschrift
                </span>
                <span class="lang-pt-BR">
                  Transcrito
                </span>
              </a>
            {% endif %}
            {% if current_person.signed_in? and features.commerce? %}
              <a class="np-header-avatar-tooltip-navigation-link" href="{% route order_history %}">
                {% t.order_history %}
              </a>
            {% endif %}
            <a class="np-header-avatar-tooltip-navigation-link" href="{% route badges %}">
              <span class="lang-en-US">
                Badges
              </span>
              <span class="lang-es">
                Insignias
              </span>
              <span class="lang-fr">
                Insignes
              </span>
              <span class="lang-de">
                Abzeichen
              </span>
              <span class="lang-en-GB">
                Badges
              </span>
              <span class="lang-nl">
                Insignes
              </span>
              <span class="lang-pt-BR">
                Emblemas
              </span>
            </a>
            {% include "language_selector"
              , desktopMode: true
              , parentClass: 'np-header-avatar-tooltip-navigation' %}
            <a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
              <span class="lang-en-US">
                {% t.sign_out %}
              </span>
              <span class="lang-es">
                Cerrar sesión
              </span>
              <span class="lang-fr">
                Se déconnecter
              </span>
              <span class="lang-de">
                Abmelden
              </span>
              <span class="lang-en-GB">
                Sign Out
              </span>
              <span class="lang-nl">
                Afmelden
              </span>
              <span class="lang-pt-BR">
                Sair
              </span>
            </a>
          </nav>
        </div>
      </div>
    {% else %}
      <a
        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
        aria-label="{% t shared.sign_in %}"
        href="{% route login %}">
        {% t shared.sign_in %}
      </a>
    {% endif %}
  </div>
</header>

<div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
    {% if current_person.signed_in? %}
      <img
        alt="{{ current_person.name }}"
        class="np-header-mobile-menu-content-avatar"
        src="{{ current_person.avatar_url }}" />
      <div class="np-header-mobile-menu-content-name">
        {{ current_person.name }}
      </div>
    {% endif %}
    <div class="np-header-mobile-menu-content-nav">
      <form
        class="np-header-search"
        data-test="mobile-search"
        method="get"
        action="{% route search %}">
        <input
          aria-label="{% t .search %}"
          class="np-header-search-input lang-en-US"
          type="text"
          name="q"
          placeholder="{% t .search %}" />
        <input
          aria-label="Buscar"
          class="header-search-input lang-es"
          type="text"
          name="q"
          placeholder="Buscar" />
        <input
          aria-label="Rechercher"
          class="header-search-input lang-fr"
          type="text"
          name="q"
          placeholder="Rechercher" />
        <input
          class="lang-de"
          aria-label="Suchen"
          class="header-search-input lang-de"
          type="text"
          name="q"
          placeholder="Suchen" />
        <input
          aria-label="Search"
          class="header-search-input lang-en-GB"
          type="text"
          name="q"
          placeholder="Search" />
        <input
          aria-label="Zoeken"
          class="header-search-input lang-nl"
          type="text"
          name="q"
          placeholder="Zoeken" />
        <input
          aria-label="Pesquisar"
          class="header-search-input lang-pt-BR"
          type="text"
          name="q"
          placeholder="Pesquisar" />
        <i class="np-header-search-icon far fa-search"></i>
      </form>
      {% unless current_school.sso_active? %}
        <a class="np-header-mobile-menu-content-button" href="{% route account %}">
          <span class="lang-en-US">
            {% t.profile_settings %}
          </span>
          <span class="lang-es">
            Configuración de perfil
          </span>
          <span class="lang-fr">
            Paramètres du profil
          </span>
          <span class="lang-de">
            Profil Einstellungen
          </span>
          <span class="lang-en-GB">
            Profile Settings
          </span>
          <span class="lang-nl">
            Profielinstellingen
          </span>
          <span class="lang-pt-BR">
            Configurações de perfil
          </span>
        </a>
      {% endunless %}
      {% if current_person.signed_in? %}
        <a class="np-header-mobile-menu-content-button" href="{% route transcript %}">
          <span class="lang-en-US">
            {% t.transcript %}
          </span>
          <span class="lang-es">
            Transcripción
          </span>
          <span class="lang-fr">
            Transcription
          </span>
          <span class="lang-de">
            Transkript
          </span>
          <span class="lang-en-GB">
            Transcript
          </span>
          <span class="lang-nl">
            Afschrift
          </span>
          <span class="lang-pt-BR">
            Transcrito
          </span>
        </a>
      {% endif %}
      {% if current_person.signed_in? and features.commerce? %}
        <a class="np-header-mobile-menu-content-button" href="{% route order_history %}">
          {% t.order_history %}
        </a>
      {% endif %}
      {% if current_person.signed_in? and features.commerce? %}
        <div class="np-header-mobile-menu-content-line"></div>
        <a class="np-header-mobile-menu-content-button np-header-mobile-menu-content-button-cart" href="{% route cart %}">
          <i class="np-header-mobile-menu-content-button-icon far fa-shopping-cart"></i>
          {% t.cart %}
          {% commerce_cart_badge %}
        </a>
      {% endif %}
      <a class="np-header-mobile-menu-content-button" href="{% route badges %}">
        <span class="lang-en-US">
          Badges
        </span>
        <span class="lang-es">
          Insignias
        </span>
        <span class="lang-fr">
          Insignes
        </span>
        <span class="lang-de">
          Abzeichen
        </span>
        <span class="lang-en-GB">
          Badges
        </span>
        <span class="lang-nl">
          Insignes
        </span>
        <span class="lang-pt-BR">
          Emblemas
        </span>
      </a>
      <div class="np-header-mobile-menu-content-line"></div>

      {% include "language_selector"
        , desktopMode: false
        , parentClass: 'np-header-mobile-menu-content-nav' %}
      <a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
        <span class="lang-en-US">
          {% t.sign_out %}
        </span>
        <span class="lang-es">
          Cerrar sesión
        </span>
        <span class="lang-fr">
          Se déconnecter
        </span>
        <span class="lang-de">
          Abmelden
        </span>
        <span class="lang-en-GB">
          Sign Out
        </span>
        <span class="lang-nl">
          Afmelden
        </span>
        <span class="lang-pt-BR">
          Sair
        </span>
      </a>
    </div>
  </div>
</div>
<div class="ql-hidden-desktop">
  {% include "nintex_quicklinks"
    , text_color: text_color
    , verticalPadding: "10px 4% 20px" %}
</div>

{% if text_en_US != '' %}
  {% include "nintex_hero"
    , color: color
    , text_en_US: text_en_US
    , text_es: text_es
    , text_fr: text_fr
    , text_de: text_de
    , text_en_GB: text_en_GB
    , text_nl: text_nl
    , text_pt_BR: text_pt_BR
    , subtitle_en_US: subtitle_en_US
    , subtitle_es: subtitle_es
    , subtitle_fr: subtitle_fr
    , subtitle_de: subtitle_de
    , subtitle_en_GB: subtitle_en_GB
    , subtitle_nl: subtitle_nl
    , subtitle_pt_BR: subtitle_pt_BR
    , button_text: button_text_en_US
    , button_text_es: button_text_es
    , button_text_fr: button_text_fr
    , button_text_de: button_text_de
    , button_text_en_GB: button_text_en_GB
    , button_text_nl: button_text_nl
    , button_text_pt_BR: button_text_pt_BR
    , button_link: button_link
    , text_color: text_color %}
{% endif %}
{% include "messages" %}

<style>
  .np-header .np-header-font-color {
    color: {{ text_color }}
     !important;
  }
  .ql-hidden-desktop {
    display: block;
  }
  .ql-hidden-mobile {
    display: none;
  }
  @media (min-width: 992px) {
    .ql-hidden-desktop {
      display: none;
    }
    .ql-hidden-mobile {
      display: block;
    }
  }
</style>
