{% assign is_in_authenticated_group = false %}

{% for group in current_person.groups %}
	{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
    {% assign is_in_authenticated_group = true %}
	{% endif %}
{% endfor %} 

{% if current_person.email contains "+preview" %}
  {% assign is_in_authenticated_group = true %}
{% endif %}

{% unless is_in_authenticated_group %}
    <script>
      console.log(window.location.pathname)
      if (window.location.pathname != "/app") {
        window.location.replace("/app")
      }
  </script>
{% endunless %}

<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 np-hidden mobile-menu-close"
          data-toggle-target=".np-header-mobile-avatar-menu,
          .np-header-mobile-menu-content, .np-main, .np-footer"
        >
          <span data-lang="DE">Menü</span>
          <span data-lang="EN">Menu</span>
          <i class="fal fa-times"></i>
        </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=".mobile-menu-close, .np-header-mobile-menu-content, .np-main, .np-footer"
        >
          <span data-lang="DE">Menü</span>
          <span data-lang="EN">Menu</span>
          <i class="far fa-bars"></i>
        </button>
      {% endif %}
    </div>
    <div class="language-dropdown-wrapper np-hidden-desktop">
      <div class="header-language-selection">
        {{current_person.properties.user_language}}
      </div>
      <ul class="languages-dropdown">
        <li data-lang="DE" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
        <li data-lang="EN" onclick="changeLanguage(this.getAttribute('data-lang'))">English</li>
      </ul>
    </div>
    {% if current_school.logo_url %}
      <h1 class="np-header-logo">
        <a href="/app/catalog">
          <img
            alt="{{ current_school.name }}"
            class="np-header-logo-image"
            src="{{ current_school.logo_url }}"
          />
        </a>
      </h1>
    {% else %}
      <a href="/app/catalog" 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">
        <li class="np-header-desktop-nav-item">
          <a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">
            <span data-lang="DE">Trainings</span>
            <span data-lang="EN">Trainings</span>           
          </a>
        </li>
        <li class="np-header-desktop-nav-item">
          <a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">
            <span data-lang="DE">Lernwege</span>
            <span data-lang="EN">Learning Paths</span>
          </a>
        </li>
        <li class="np-header-desktop-nav-item">
          <a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">
            <span data-lang="DE">Auszeichnungen</span>
            <span data-lang="EN">Awards</span>
          </a>
        </li>
        <li class="np-header-desktop-nav-item">
          <a href="/app/on-the-job" class="np-header-desktop-nav-link videos-link">
            <span data-lang="DE">On-The-Job Videos</span>
            <span data-lang="EN">On-The-Job Videos</span>         
          </a>
        </li>
        {% 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="language-dropdown-wrapper np-hidden-mobile">
      <div class="header-language-selection">
        {{current_person.properties.user_language}}
      </div>
      <ul class="languages-dropdown">
        <li data-lang="DE" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
        <li data-lang="EN" onclick="changeLanguage(this.getAttribute('data-lang'))">English</li>
      </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" aria-label="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 %}"
            >
              {% t .profile_settings %}
            </a>
          {% endunless %}
            <a
              class="np-header-avatar-tooltip-navigation-link np-danger"
              href="{% route logout %}"
            >
              <span data-lang="DE">{% t .sign_out %}</span>
              <span data-lang="DE">Logout</span>
            </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">
    <div class="np-header-mobile-menu-content-nav">
      <a href="/app/catalog" class="np-header-mobile-menu-content-button">Trainings</a>
      <a href="/app/learning_paths" class="np-header-mobile-menu-content-button">
        <span data-lang="DE">Lernwege</span>
        <span data-lang="EN">Learning Paths</span>
      </a>
      <a href="/app/zertifikate" class="np-header-mobile-menu-content-button">
        <span data-lang="DE">Auszeichnungen</span>
        <span data-lang="EN">Awards</span>
      </a>
      <a href="/app/on-the-job" class="np-header-mobile-menu-content-button">On-The-Job Videos</a>
      <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=""
        />
        <i class="np-header-search-icon far fa-search" aria-label="search"></i>
      </form>
    </div>
  </div>
</div>

{% include "messages" %}

<style>
body.mobile-menu-open main.np-main.np-hidden {
  display: block!important;
}

.np-header {
	height: auto;
  padding-top: 12px;
  transition:transform 0.3s, background-color 0.2s;
  top:0;
}

.np-header.sticky {
  position: sticky;
  background-color:#3e1191;
}

.np-header.sticky-hide {
  transform: translateY(-100px);
}

.np-header.sticky-show {
  transform: translateY(0);
}

body.mobile-menu-open .np-header {
  background-color:#3e1191;
}

.np-header-logo {
	padding: 0.75rem 0;
  justify-content:flex-start;
}

.np-header-logo-image {
  height:27px;
}

.np-header-mobile-menu-nav {
  position:relative;
}

.np-header-mobile-menu-content {
  background-color: #3e1191;
  top:66px;
  left:unset;
  bottom:unset;
  width:50%;
  padding: 0 0 8px;
}

.np-header-mobile-menu-content .np-header-mobile-menu-content-nav {
  padding: 0 10px;
}

.np-header-mobile-menu-content .np-header-mobile-menu-content-button {
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: 1px solid #fff;
  height: auto;
  font-size: 15px;
  padding: 3px;
  font-weight: 700;
  margin-top:10px;
}

.np-header-mobile-menu-content .np-header-search-input,
.np-header-mobile-menu-content .np-header-search-input:focus {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 30px 8px 10px;
  font-size:14px;
  height:auto;
  border-radius:4px;
}

.np-header-mobile-menu-content .np-header-search { padding-top:10px; }

.np-header-mobile-menu-content .np-header-search-icon,
.np-header-mobile-menu-content .np-header-search-input:hover + .np-header-search-icon {
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 19px;
}

.np-header-mobile-menu-content-name { color:#fff;}

.np-header-mobile-menu-nav-button {
  background-color:#fff;
  color: #3e1191;
  width: auto;
  font-size: 16px;
}

.np-header-mobile-menu-nav-button i.fa-bars,
.np-header-mobile-menu-nav-button i.fa-times {
  font-size:20px;
  margin-left:8px;
}

@media screen and ( min-width: 48rem ) {
	.np-header-logo {
		padding: 1.25rem 0;
	}
}
/* --- Navigation --- */
.np-header-desktop-nav-list {
	justify-content: end;
	margin: 1rem;
	padding-left: 0;
}
.np-header-desktop-nav-link {
	padding: 0.1rem 0.75rem 0.15rem;
	border: transparent 2px solid;
	border-radius: 3rem;
  color:#fff;
  font-size:18px;
  margin-right:12px;
}
.np-header-desktop-nav-item {
	padding: 0;
	margin: 2px;
}

.np-header-desktop-nav-link:focus,
.np-header-desktop-nav-link:hover {
	border-color: #7625f7;
	color:#fff;
	outline: none;
}

.np-header-desktop-nav-link.is-active {
	background-color: #8b78fa;
}
.np-header-desktop-nav-link.is-active:focus {
	border-color: #275cb8;
}

.np-header-search-input:hover + .np-header-search-icon {
	color: #bfe4ff;
}

.np-header-search-input:focus {
	border-color: #275cb8;
	outline: none;
	border-radius: 3rem;
	padding: 0 1.25rem 0 2.5rem;
}

.np-header-search-input:focus + .np-header-search-icon {
	color: #304780;
}

.np-header-mobile-menu-content-button.np-danger {
	border-color: #ff5773;
	color: #E52242;
}

/* LANGUAGE DROPDOWN */
  .language-dropdown-wrapper {
    position:relative;
  }
  .header-language-selection {
    display: flex;
    gap: 8px;
    padding:20px;
    font-size:20px;
    cursor:pointer;
    color:#fff;
    align-items:center;
    position:relative;
    margin-right:12px;
  }
  .header-language-selection:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 14px;
    top: 50%;
    right: 4px;
    color: #fff;
    transition: transform 0.2s;
    transform: translateY(-50%) rotate(0deg);
  }

  .header-language-selection.active:after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .languages-dropdown {
    position:absolute;
    top: 66px;
    left:50%;
    transform: translateX(-50%);
    background-color: #3e1191;
    color:#fff;
    margin:0;
    height:0;
    opacity:0;
    min-width:170px;
    list-style:none;
    transition: opacity 0.2s;
    z-index: 1;
  }

  .languages-dropdown:not(.show) {
      visibility: hidden;
  }
  .languages-dropdown.show {
    height:auto;
    opacity:1;
    padding:12px;
  }
  .languages-dropdown li {
    cursor: pointer;
    width:100%;
    padding: 3px;
    font-size:16px;
    border-radius:3px;
    text-align:center;
    border: 1px solid #fff;
    margin-bottom:10px;
  }
  /* END LANGUAGE DROPDOWN */

@media (min-width:768px) {
  .np-header-search-input {
    opacity: unset;
    border-radius: 3rem;
    background-color: #304780;
  }

  .np-header-search-icon {
    right: unset;
    left: 0.75rem;
  }

  .header-language-selection {
    margin-right:20px;
  }
}
</style>

<script>
  const currentPath = window.location.pathname;

  if (currentPath == "/app/courses") {
    $(".trainings-link").addClass("is-active")
  } else if (currentPath.includes("/app/learning_paths")) {
    $(".learning-paths-link").addClass("is-active")
  } else if (currentPath == "/app/zertifikate") {
    $(".certs-link").addClass("is-active")
  } else if (currentPath == "/app/on-the-job") {
    $(".videos-link").addClass("is-active")
  } else if (currentPath.includes("/app/training_events")) {
    $(".events-link").addClass("is-active")
  }

  $("button[data-test='open-mobile-menu']").click(function() {
    console.log($(this))
    $("body").addClass("mobile-menu-open")
  })

  $(".np-header-mobile-menu-nav-button:not([data-test='open-mobile-menu'])").click(function() {
      $("body").removeClass("mobile-menu-open")
  })

window.onscroll = function() {detectScroll()};

var header = document.querySelector(".np-header");
var lastScrollTop = 0;

function detectScroll() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (window.pageYOffset > 0) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }

  if (window.pageYOffset > 150) {
    if (scrollTop > lastScrollTop) {
      header.classList.remove("sticky-show");
      header.classList.add("sticky-hide");
      if (!$(".np-header-mobile-menu-content").hasClass("np-hidden")) {
        $(".np-header-mobile-menu-nav-button.fa-times").click()
      }

    } else if (scrollTop < lastScrollTop) {
      header.classList.add("sticky-show");
      header.classList.remove("sticky-hide");
    }
    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
  }
}

// Languages dropdown hover effect
$(".header-language-selection").click((e) => {
  if ($(e.target).hasClass("active")) {
    $(".languages-dropdown").removeClass('show');
    $(e.target).removeClass('active');
  } else {
    $(".languages-dropdown").addClass('show');
    $(e.target).addClass('active');
  }
})

function changeLanguage(lang) {
  const userPropertyLang = '{{current_person.properties.user_language}}'
  const localStorageLang = localStorage.getItem('lang', lang)

  console.log(`Selected language: ${lang} | language set in property: ${userPropertyLang} | language in local storage: ${localStorageLang}`)

  // hide dropdown
  $(".languages-dropdown").removeClass('show');
  $(".header-language-selection").removeClass("active")

  // if no local storage, 
  if (localStorageLang == null) {
    localStorage.setItem('lang', lang);
  }

  if (userPropertyLang != lang) {
    $(".header-language-selection").text(lang);
    $("body").attr("data-lang", lang)

    // make workato call here
    setLanguageWorkflow(lang)
  } else {
    $(".header-language-selection").text(lang);
    $("body").attr("data-lang", lang)
  }
}

$(document).ready(function() {
  console.log('Property {{current_person.properties.user_language}}')
  console.log(localStorage.getItem('lang'))
  const userPropertyLang = '{{current_person.properties.user_language}}'
  const localStorageLang = localStorage.getItem('lang')

  if (localStorageLang == null) {
    console.log("no local storage, use property to set lang")
    $("body").attr("data-lang", userPropertyLang)
    $(".header-language-selection").text(userPropertyLang );
  } else {
    if (localStorageLang == userPropertyLang) {
      console.log("delete local storage and use property lang")
      $("body").attr("data-lang", userPropertyLang)
      $(".header-language-selection").text(userPropertyLang );
       localStorage.removeItem('lang');
    } else {
      console.log("use local storage lang")
      $("body").attr("data-lang", localStorageLang)
      $(".header-language-selection").text(localStorageLang );
    }
  }
})

function setLanguageWorkflow(lang) {
  console.log("calling workato workflow")
  var data = {
    learner_uuid : '{{current_person.id}}',
    language : lang
  };

  const schoolID = '{{current_school.id}}' 
  let workatoEndpoint = ""

  if (schoolID == "d4f9d06b-bbe9-4e0a-85ee-eadc10f17914") {
    workatoEndpoint = 'https://webhooks.workato.com/webhooks/rest/ccd1cbb2-59bc-4590-852a-a0d217d198b1/user-changes-language'
  } else if (schoolID == "6e96bbdd-7818-4920-b79c-e46132939929") {
    workatoEndpoint = 'https://webhooks.workato.com/webhooks/rest/0cb722cd-39ae-4754-9c37-380e6672cdbf/user-changes-language'
  }

  $.ajax({
      type : 'POST',
      url : workatoEndpoint,
      data: JSON.stringify(data),
      success:function (data) {
        console.log(data);
      },
      error: function(xhr, status, error) {
      console.log(error)
    }
  });
}

</script>