<script>
  document.addEventListener("DOMContentLoaded", function(){
    let npLangCookie = getCookie("npLang")
    let currentLang = 'en';

    if (!npLangCookie) {
      setCookie('npLang', 'en', 365)
      currentLang = 'en'
    } else {
      if (npLangCookie == 'es') {
        currentLang = 'es'
      }
    }

    console.log("currentLang: ", currentLang)

    if (currentLang == 'es') {
      document.body.classList.add('lang-es')
      $(".nav-item-about").attr('href', 'https://www.northpass.com/')
      $(".btn-additional-content").attr('href', "https://www.northpass.com/")
      $('.np-footer-support-link').attr('href', 'mailto:support@northpas.com')
      $('.np-footer-support-link').text('support@northpass.com')
    } else if (currentLang == "en") {
      document.body.classList.remove('lang-es')
      document.body.classList.add('lang-en')
      $('.np-footer-support-link').attr('href', 'mailto:support@northpass.com')
      $('.np-footer-support-link').text('support@northpass.com')
    }

  });

  function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) {
        end = dc.length;
        }
    }
    return decodeURI(dc.substring(begin + prefix.length, end));
  }

  function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
  }

  function setLanguage(lang) {
    console.log("setting language as: ", lang)

    if (lang == "es") {
      setCookie("npLang", "es", 365)
      setTimeout(location.reload.bind(location), 700);
    } else {
      setCookie("npLang", "en", 365)
      setTimeout(location.reload.bind(location), 700);
    }
  }
</script>

<header class="np-header np-header-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 %}">
          <img
            alt="{{ current_school.name }}"
            class="np-header-logo-image"
            src="{{ current_school.logo_url }}"
          />
        </a>
      </h1>
    {% else %}
      <a href="{% route home %}" class="np-school-name np-header-font-color">
        {{ current_school.name }}
      </a>
    {% 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>
    {% 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 np-header-font-background-color"
            type="text"
            name="q"
            placeholder="{% t .search %}"
          />
          <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">
             <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
              Default
            </a>
          {% unless current_school.sso_active? %}
            <a
              class="np-header-avatar-tooltip-navigation-link"
              href="{% route account %}"
            >
              {% t .profile_settings %}
            </a>
          {% endunless %}
            <a
              class="np-header-avatar-tooltip-navigation-link np-danger"
              href="{% route logout %}"
            >
              {% t .sign_out %}
            </a>
          </nav>
        </div>
      </div>
    {% else %}
      <a
        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
        href="{% route login %}"
      >
        {% t shared.sign_in %}
      </div>
    {% 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"
          type="text"
          name="q"
          placeholder="{% t .search %}"
        />
        <i class="np-header-search-icon far fa-search"></i>
      </form>
      {% for website_navigation in navigations.header_navigations %}
        <a
          href="{{ website_navigation.path }}"
          class="np-header-mobile-menu-content-button"
          {% if website_navigation.external? %} target="_blank" {% endif %}
        >
          {{ website_navigation.name }}
        </a>
      {% endfor %}
      <div class="np-header-mobile-menu-content-line"></div>
      {% unless current_school.sso_active? %}
        <a
          class="np-header-mobile-menu-content-button"
          href="{% route account %}"
        >
          {% t .profile_settings %}
        </a>
      {% endunless %}
      <a
        class="np-header-mobile-menu-content-button np-danger"
        href="{% route logout %}"
      >
        {% t .sign_out %}
      </a>
    </div>
  </div>
</div>

{% include "messages" %}

<script>
    if (window.location.pathname === "/app") {
      const headerTag = document.querySelector(".np-header");
      headerTag.classList.add("np-header-absolute");
    }

    $(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
    /*
    function buildURL(path) {
      const url = "https://academy.getpixel.io" + path + "?first_name={{current_person.first_name}}&last_name={{current_person.last_name}}&email={{current_person.email}}"
      window.location.href = url
    }
    */
</script>

<script>


/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

<style>
.hr.divider {
  border-top: 4px solid black;
  border-radius: 5px;
  opacity: 0.5;
}

.dropbtn {
  color: white;
  padding: 13px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  border-radius: 5px;
  max-height: 44px;
  font-weight: 500;
  margin-top: 1px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  text-align: center;
  display: none;
  position: absolute;
  background-color: #001e2e;
  min-width: 120px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  border-radius: 4px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.dropdown-content a {
  color: white;
  opacity: 0.5;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  opacity: 1;
  font-weight: 600;
  cursor: pointer;
}

.show {display: block;}
</style>
