{% if current_school.id == '3eed8278-7beb-4918-bca6-73db73e2ec3a' %}
  <script>
    const splitDefaultPageTitle = document.title.split(" | ")

    if (window.location.pathname == "/app/catalog") {
      document.title = `Academy Courses | ${splitDefaultPageTitle[1]}`
    } else if (window.location.pathname == "/app/video-tutorials") {
      document.title = `CRM Video Tutorials | ${splitDefaultPageTitle[1]}`
    } else if (window.location.pathname == "/app/webinars") {
      document.title = `CRM Webinars | ${splitDefaultPageTitle[1]}`
    }
  </script>
{% else %}
  <script>
    const defaultPageTitle = document.title

    if (window.location.pathname == "/app/catalog") {
      document.title = `Academy Courses | ${defaultPageTitle}`
    } else if (window.location.pathname == "/app/video-tutorials") {
      document.title = `CRM Video Tutorials | ${defaultPageTitle}`
    } else if (window.location.pathname == "/app/webinars") {
      document.title = `CRM Webinars | ${defaultPageTitle}`
    }
  </script>
{% endif %}

<header class="main-header width-limit">
  <section class="header-left header-flex">
    <img
      class="header-mobile-menu-button header-mobile"
      src="https://s3.amazonaws.com/static.northpass.com/pipedrive/hamburger.png"
      alt="menu"
      onclick="toggleSideMenu()"
    >
    <a class="header-logo" href="/app">
      <img class="header-logo-image"
        alt="{{ current_school.name }}"
        src="https://s3.amazonaws.com/static.northpass.com/pipedrive/learn_logo.png"
      >
    </a>
    <div class="header-desktop-navigation header-desktop header-flex body-s">
        <a class="header-navigation-item lang-en" href="/app/catalog">Academy Courses</a>
        <a class="header-navigation-item lang-en" href="/app/video-tutorials">Video Tutorials</a>
        <a class="header-navigation-item lang-en" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinars</a>

        <a class="header-navigation-item lang-es catalog-link" href="/app/es-catalog">Cursos de la Academia</a>
        <a class="header-navigation-item lang-es video-tutorials-link" href="/app/es-video-tutorials">Tutoriales en vídeo</a>
        <a class="header-navigation-item lang-es" href="https://www.pipedrive.com/en/webinars" target="_blank">Seminarios en línea</a>

        <a class="header-navigation-item lang-de catalog-link" href="/app/de-catalog">Akademie-Kurse</a>
        <a class="header-navigation-item lang-de video-tutorials-link" href="/app/de-video-tutorials">Video-Tutorials</a>
        <a class="header-navigation-item lang-de" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinare</a>

        <a class="header-navigation-item lang-fr catalog-link" href="/app/fr-catalog">Cours de l'Académie</a>
        <a class="header-navigation-item lang-fr video-tutorials-link" href="/app/fr-video-tutorials">Tutoriels vidéo</a>
        <a class="header-navigation-item lang-fr" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinaires</a>

        <a class="header-navigation-item lang-br catalog-link" href="/app/br-catalog">Cursos da Academia</a>
        <a class="header-navigation-item lang-br video-tutorials-link" href="/app/br-video-tutorials">Tutoriais em vídeo</a>
        <a class="header-navigation-item lang-br" href="https://www.pipedrive.com/en/webinars" target="_blank">Webinars</a>
    </div>
  </section>
  <section class="header-right header-flex">
    <div class="header-desktop header-flex">
      <a class="header-navigation-item body-s" href="https://www.pipedrive.com">
        <span class="lang-en">go to</span>
        <span class="lang-de">Gehen Sie zu</span>
        <span class="lang-es">ir a</span>
        <span class="lang-fr">aller à</span>
        <span class="lang-br">ir para</span> pipedrive.com
      </a>

      {% if current_person.signed_in? %}
        <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="np-header-search-input"
              type="text"
              name="q"
              placeholder="Search Pipedrive"
            />
            <i class="np-header-search-icon fal fa-search"></i>
          </form>
        </div>
      {% endif %}
      <div class="language-dropdown-wrapper" style="margin-left:20px;">
        <div class="header-language-selection">
          <i class="fal fa-globe"></i>
          <i class="fal fa-angle-down"></i>
        </div>
        <ul class="languages-dropdown">
          <li data-lang="en" class="current-lang" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">English</li>
          <li data-lang="de" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Deutsch</li>
          <li data-lang="es" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Español</li>
          <li data-lang="fr" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Français</li>
          <li data-lang="br" onclick="changeLanguage(this.getAttribute('data-lang')), redirectToLanguageHomepage(this.value)">Português (BR)</li>
        </ul>
      </div>

      {% if current_person.signed_in? %}
        {% if current_person.avatar_url contains "https://secure.gravatar.com/avatar" %}
          <img class="header-profile-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/Avatar.png" alt="profile image">
        {% else %}
          <img class="header-profile-image" src="{{ current_person.avatar_url }}" alt="profile image">
        {% endif %}
        <div class="header-profile-menu">
          <div class="header-profile-menu-name body-s strong">
            {{ current_person.name }}
          </div>
          <i class="far fa-chevron-down profile-arrow-down"></i>
          <i class="far fa-chevron-up profile-arrow-up"></i>
          <div class="profile-dropdown">
            <div class="profile-dropdown-name body-s strong">
              {{ current_person.name }}
            </div>
            <div class="profile-dropdown-email body-s">
              {{ current_person.email }}
            </div>
              <a class="profile-dropdown-link body-s"
                {% if current_school.sso_active? %}
                  href="/app/profile-settings"
                {% else %}
                  href="/app/account"
                {% endif %}
                 style="margin-top: 15px;">
                <span class="lang-en">Settings</span>
                <span class="lang-de">Einstellungen</span>
                <span class="lang-es">Ajustes</span>
                <span class="lang-fr">Paramètres</span>
                <span class="lang-br">Configurações</span>
              </a>
            <a class="profile-dropdown-link body-s" href="/learners/sign_out">
              <span class="lang-en">Log out</span>
              <span class="lang-de">Abmelden</span>
              <span class="lang-es">Cerrar sesión</span>
              <span class="lang-fr">Déconnexion</span>
              <span class="lang-br">Sair</span>
            </a>
          </div>
        </div>
      {% else %}
        <a class="header-navigation-item body-s" href="#sso-widget">
          <span class="lang-en">Log in</span>
          <span class="lang-de">Einloggen</span>
          <span class="lang-es">Conectarse</span>
          <span class="lang-fr">Connexion</span>
          <span class="lang-br">Entrar</span>
        </a>
    {% endif %}
    </div>

    <div class="header-mobile header-flex">
      {% unless current_person.signed_in? %}
        <a class="header-register-button button-1 button-small" href="#sso-widget">
          <span class="lang-en">Register</span>
          <span class="lang-de">Anmelden</span>
          <span class="lang-es">Regístrese en</span>
          <span class="lang-fr">Inscription</span>
          <span class="lang-br">Cadastrar-se</span>
        </a>
      {% endunless %}
    </div>
  </section>
</header>

{% include "header_mobile_menu" %}
{% include "messages" %}
{% include 'new_academy_popup' %}
<style>
  .header-flex {
    display: flex;
    align-items: center;
  }
  .header-right {
    flex: 1;
  }
  .header-right .header-desktop {
    width:100%;
    justify-content: flex-end;
  }
  .header-mobile.header-flex {
    width:100%;
    justify-content:flex-end;
  }
  .header-right .header-register-button {
    width:auto;
  }
  .main-header {
    display: flex;
    justify-content: space-between;
    height: 72px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #FFF;
    position: relative;
  }
  .header-mobile-menu-button {
    height: 100%;
    margin-right: 20px;
  }
  .header-logo {
    height: 100%;
    display: flex;
  }
  .header-logo-image {
    height: 32px;
    align-self: center;
  }
  .header-navigation-item {
    padding: 5px 0;
    margin: auto 20px;
    position:relative;
  }
  .header-navigation-item:after {
    content: "";
    position: absolute;
    right: 0;
    width: 0;
    bottom: 4px;
    background: #017737;
    height: 2px;
    opacity:0;
    transition:width 0.3s ease-out, opacity 0.3s ease-out;
  }
  .header-navigation-item:hover:after,
  .header-navigation-item:focus:after,
  .header-navigation-item:active:after,
  .header-navigation-item-active:after {
    left: 0;
    right: auto;
    width: 100%;
    opacity:1;
  }

  /* SEARCH */
  .np-header-search-input {
    border-radius: 50%;
    background-color: #F4F5F6;
    opacity: 1;
    border: 2px solid #F4F5F6;
    color:#192435;
    transition:width 0.2s ease-out;
  }
  .np-header-search-icon {
    color:#192435;
  }
  .np-header-search-input:focus {
    border-radius: 30px;
    border: 2px solid #0e5235;
    padding: 0 40px 0 20px;
  }
  /* END SEARCH */

  /* LANGUAGE DROPDOWN */
  .language-dropdown-wrapper {
    position:relative;
  }
  .header-language-selection {
    display: flex;
    gap: 8px;
    padding:20px;
    font-size:20px;
    cursor:pointer;
  }
  .header-language-selection .fa-angle-down  {
    font-size: 25px;
    position: relative;
    bottom: 3px;
    transition: transform 0.2s;
  }
  .header-language-selection:hover .fa-angle-down,
  .language-dropdown-wrapper:hover .fa-angle-down  {
    transform:rotate(180deg)
  }
  .languages-dropdown {
    position:absolute;
    top: 66px;
    left:50%;
    transform: translateX(-50%);
    background-color:#fff;
    margin:0;
    border-radius:4px;
    height:0;
    opacity:0;
    min-width:200px;
    list-style:none;
    transition: opacity 0.2s;
    box-shadow: 0px 3px 5px rgba(0,0,0,.08),0px 0px 4px rgba(0,0,0,.12);
    z-index: 1;
  }
  .languages-dropdown:after {
    content: "";
    position:absolute;
    top:-10px;
    left:50%;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
  }
  .languages-dropdown:not(.show) {
      visibility: hidden;
  }
  .languages-dropdown.show {
    height:auto;
    opacity:1;
    padding:20px 0;
  }
  .languages-dropdown li {
    cursor: pointer;
    width:100%;
    padding:4px 12px;
    font-size:16px;
  }
  .languages-dropdown li:hover {
    text-decoration:underline;
    background-color:#e4e6e9;
  }
  .languages-dropdown li.current-lang {
    background-color:#edeef0;
  }
  /* END LANGUAGE DROPDOWN */

  .header-profile-image {
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
  }
  .header-profile-menu {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
  }
  .profile-arrow-up {
    display: none;
  }
  .header-profile-menu-open .profile-arrow-up {
    display: block;
  }
  .header-profile-menu-open .profile-arrow-down {
    display: none;
  }
  .profile-dropdown {
    display: none;
    position: absolute;
    bottom: 0;
    transform: translate(-50%, 100%);
    flex-direction: column;
    background: #FFF;
    padding: 25px 20px;
    border-radius: 4px;
    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.08)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.12));
    width: fit-content;
    z-index: 1;
  }
  .header-profile-menu-open .profile-dropdown {
    display: flex;
  }
  .profile-dropdown-name {
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .profile-dropdown-email {
    color: #656E7A;
    padding-bottom: 15px;
    border-bottom: 1px solid #E4E6E9;
  }
  .profile-dropdown-link {
    margin: 5px 0;
  }

  @media only screen and (min-width: 1151px) {
    .header-mobile {
      display: none !important;
    }
    .main-header {
      height: 84px;
    }
  }
  @media only screen and (max-width: 1150px) {
    .header-desktop {
      display: none !important;
    }
  }
</style>

<script>
  // profile settings dropdown
  {% if current_person.signed_in? %}
    document.querySelector('body').addEventListener('click', listenerDropdown);

    function toggleDropdown() {
      let element = document.querySelector('.header-profile-menu');
      element.classList.toggle('header-profile-menu-open');
    }

    function listenerDropdown(event) {
      let isDropdownOpen = !!document.querySelector('.header-profile-menu-open');
      if (isDropdownOpen) {
        let dropdownElement = document.querySelector('.profile-dropdown');
        if (!dropdownElement.contains(event.target)) {
          toggleDropdown();
        }
      } else {
        let dropdownButton = document.querySelector('.header-profile-menu');
        if (dropdownButton.contains(event.target)) {
          toggleDropdown();
        }
      }
    }
  {% endif %}

  // setup active subpage indicator on navigations
  addEventListener("DOMContentLoaded", () => {
    if (window.location.pathname === '/app/catalog') {
      document.querySelector('#side-menu-courses')?.classList.add('side-menu-link-active');
      document.querySelector('.header-navigation-item[href="/app/catalog"]')?.classList.add('header-navigation-item-active');
    } else if (window.location.pathname === '/app/video-tutorials') {
      document.querySelector('#side-menu-tutorials')?.classList.add('side-menu-link-active');
      document.querySelector('.header-navigation-item[href="/app/video-tutorials"]')?.classList.add('header-navigation-item-active');
    }

    changeHeaderImageLink();
  });

  // Languages dropdown hover effect
  document.querySelector(".header-language-selection").addEventListener('mouseover', () => {
    document.querySelector(".languages-dropdown").classList.add('show');
  })
  document.querySelector(".language-dropdown-wrapper").addEventListener('mouseleave', () => {
    document.querySelector(".languages-dropdown").classList.remove('show');
  })

  function changeHeaderImageLink() {
    let userStorageLanguage = window.localStorage.getItem('academy-language');

    if (userStorageLanguage != 'en') {
      document.querySelector(".header-logo").href = `/app/${userStorageLanguage}-homepage`
    } else {
      document.querySelector(".header-logo").href = `/app`
    }
  }
</script>