{%- comment -%} {% assign redirect = true %}
{% if current_person.signed_in? %}
  {% for group in current_person.groups %}
    {% if group.id == "29ae12e6-f740-4190-a5c2-a7e12e87926f" or group.id == "aa36069f-e354-4dbe-9972-9ce70ad146d7" or group.id == "8cd6ec9c-101e-4b1a-82c7-77dac583a1f5" %}
      {% assign redirect = false %}
      {% break %}
    {% endif %}
  {% endfor %}
{% endif %}

{% if current_person.signed_in? and redirect %}
  {% unless current_person.email contains '+preview-' %}
    <script>
      if (window.location.pathname != '/app/sign-up-follow-up' && window.location.pathname != '/terms_agreement/new'){
        new_url = '/app/sign-up-follow-up'.concat('?redirect_uri=', encodeURIComponent(window.location.toString().split(window.location.hostname)[1]));
        window.location.replace(new_url);
      }
    </script>
  {% endunless %}
{% endif %} {%- endcomment -%}

<header id="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=".np-button-mobile-content, .fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
            <i style="color: #005CB9;" class="far fa-bars"></i>
        </button>
      {% endif %}
    </div>
    {% if current_person.signed_in? %}
      {% if current_school.logo_url %}
        <div class="logo-container">
          <h1 class="np-header-logo" style="flex-grow: 0.1 !important">
            <a href="{% route home %}">
              <img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-mobile" src="{{ current_school.logo_url }}" />
              <img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/Skuid+Logomark_Primary+1.svg" />
            </a>
          </h1>
        </div>
      {% else %}
        <a href="{% route home %}" class="np-school-name np-header-font-color">
          {{ current_school.name }}
        </a>
      {% endif %}
    {% endif %}

    {% if current_person.signed_in? %}
      <div class="np-hidden-mobile form-group has-search" style="margin-left: 3%;">
        <form action="{% route search %}" method="get" data-test="desktop-search">
          <span class="fa fa-search form-control-feedback"></span>
          <input aria-label="{% t .search %}" class="form-control" type="text" name="q" placeholder="search courses" />
        </form>
      </div>
      
      <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>
    {% endif %}


    {% if current_person.signed_in? %}
      <div class="np-hidden-mobile np-header-avatar" style="align-items: center;">
        <div class="points-badges-avatar">
          {% if current_person.properties.learner_points contains "missing property" %}
            <p class="points-display"> 0 Points </p>
          {% else %}
            <p class="points-display"> {{ current_person.properties.learner_points }} Points </p>
          {% endif %}
          {% if current_person.properties.learner_badges contains "missing property" %}
            <p class="badges-display"> 0 Badges </p>
          {% else %}
            <p class="badges-display"> {{ current_person.properties.learner_badges }} Badges </p>
          {% endif %}
        </div>
        <div class="points-badges-avatar">
          <button class="np-header-avatar-button avatar-container" data-test="open-desktop-menu"
            data-toggle-class-on-target="np-hidden" data-toggle-target=".np-header-avatar-tooltip" data-toggle-outside>
            <i class="fal fa-angle-down" style="font-size: 20px;"></i>
            <p style="margin-top: revert;"> {{current_person.display_name }} </p>
            <img alt="{{ current_person.name }}" class="np-header-avatar-image avatar-image"
              src="{{ current_person.avatar_url }}">
          </button>
        </div>
        <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.display_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" href="mailto:{{ website_footer.school_customer_service_email }}">
              Need help?
            </a>
            <a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
              {% t .sign_out %}
            </a>
          </nav>
        </div>
      </div>
    {% else %}
      <div style="display: flex; align-items: center;">
        <div class="logo-container">
          <h1 class="np-header-logo" style="flex-grow: 0.1 !important">
            <a href="{% route home %}">
              <img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-mobile" src="{{ current_school.logo_url }}" />
              <img alt="{{ current_school.name }}" class="np-header-logo-image np-hidden-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/Skuid+Logomark_Primary+1.svg" />
            </a>
          </h1>
        </div>
        <div class="np-hidden-mobile form-group has-search" style="margin-left: 3%;">
          <form action="{% route search %}" method="get" data-test="desktop-search">
            <span class="fa fa-search form-control-feedback"></span>
            <input aria-label="{% t .search %}" class="form-control" type="text" name="q" />
          </form>
        </div>
      </div>
      <div style="display: flex; align-items: center;">
        <a class="np-header-sign-in np-header-desktop-nav-link np-header-font-color" style="font-size: 16px;" aria-label="{% t shared.sign_in %}"
          href="{% route login %}">
            Login
        </a>
        <a class="np-header-sign-in np-header-desktop-nav-link np-header-font-color np-button" style="margin-left: 18%; color: white; border-radius: 32px; font-size: 16px;" aria-label="{% t shared.sign_up %}"
          href="{% route sign_up %}">
            Register
        </a>
      </div>
    {% endif %}
  </div>
</header>

<div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
    <div class="mobile-header-dropdown">
      {% if current_school.logo_url %}
        <div>
          <h1 class="np-header-logo" style="flex-grow: 0.1 !important">
            <a href="{% route home %}">
              <img alt="{{ current_school.name }}" class="np-header-logo-image" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/Skuid+Logomark_Primary+1.svg" />
            </a>
          </h1>
        </div>
      {% endif%}
      <div>
        <button class="np-hidden np-button-mobile-content" id='closing-button' data-test="close-mobile-menu" data-toggle-class="np-hidden" data-toggle-target=".np-header-mobile-avatar-menu, .fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
          <input type="image" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/OpenNavIcon.svg" />
        </button>
      </div>
    </div>
    {% if current_person.signed_in? %}
    <div class="user-container-mobile">

      <a href="{% route account %}" class="np-header-mobile-menu-content-button mobile-header-link" style="border-bottom: none;">
        <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>
      </a>

    </div>
    {% endif %}
    <div class="np-header-mobile-menu-content-nav">
      <form class="np-header-search" data-test="mobile-search" method="get" action="{% route search %}">
        <i class="np-header-search-icon far fa-search"></i>
        <input aria-label="{% t .search %}" class="np-header-search-input" type="text" name="q"
          placeholder="{% t .search %}" />
      </form>
      {% for link in navigations.sub_navigation %}
        {% if link.label == "Events"  or link.label == "Dashboard" %}
        {% elsif link.label == "Catalog" %}
          <a href="{{ link.url }}" class="np-header-mobile-menu-content-button mobile-header-link">
            <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
            Courses
          </a>
        {% elsif link.label == "Home" %}
          <a href="{{ link.url }}" class="np-header-mobile-menu-content-button mobile-header-link">
            <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
            Home
          </a>
        {% else %}
          <a href="{{ link.url }}" class="np-header-mobile-menu-content-button mobile-header-link">
            <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon custom-navigation-content-item-icon"></i>
            {{ link.label }}
          </a>
        {% endif %}
      {% endfor %}

      {%comment%}
      <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>
      {%endcomment%}
    </div>
  </div>
</div>

{% include "messages" %}

{% if current_person.signed_in? %}
  <style>

    @media (min-width: 769px) and (max-width: 1024px) {
      body {
        transform: scaleX(0.962014);
        background: linear-gradient(90deg, #ebf5ff 230px, #fff 230px);
      }
    }

    @media (min-width: 1025px) and (max-width: 2500px) {
      body {
        transform: scaleX(0.962014);
        background: linear-gradient(90deg, #ebf5ff 293px, #fff 293px);
      }
    }

    @media (min-width: 2501px) {
      body {
        transform: scaleX(0.962014);
        background: linear-gradient(90deg, #ebf5ff 350px, #fff 350px);
      }
    }

    .np-main {
	    padding-left: 0;
    }

    @media (max-width: 768px) {
      body {
        background: #fff;
        transform: none;
      }

      .np-header-content {
        flex-direction: row-reverse;
      }

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

    @media (min-width: 769px) and (max-width: 1440px) {
      .np-main {
		    margin-left: 9% !important;
	    }
    }

    @media (min-width: 1440px) and (max-width: 2500px) {
      .np-main {
		    margin-left: 8% !important;
	    }
    }

    @media (min-width: 769px) and (max-width: 1900px) {
      .np-card.np-no-horizontal-padding {
        padding-left: 25px;
        padding-right: 25px;
      }

      .np-learning-paths-main > .np-resource-title,
      .np-learning-paths-main > .np-resource-subtitle,
      .np-catalog-header {
        padding-left: 25px;
      }
    }

    @media (max-width: 1024px) {
      .np-footer {
        padding-left: 24%;
      }
    }
  </style>
{% endif %}

{% unless current_person.signed_in? %}
  <style>
    @media screen and (min-width: 769px) {
      .np-header {
        background: transparent;
        padding-left: 3%;
        padding-right: 3%;
        height: 85px;
      }

      .np-card.np-no-horizontal-padding {
        padding-left: 2rem;
        padding-right: 2rem;
      }

      .np-header-content {
        justify-content: space-between;
      }

      .logo-container {
        padding: 0px 50px 0px 5px;
      }

      .form-control {
        border: 1px solid #005CB9 !important;
      }

      .np-homepage-hero-image {
        max-height: fit-content;
      }

      .np-header-logo {
        margin: 0;
      }
    }

    @media (max-width: 768px) {
      .np-header-content {
        flex-direction: row;
      }

      .np-header-mobile-menu-nav {
        display: none !important;
      }

      .np-header-sign-in {
        position: relative;
      }

    }
  </style>
{% endunless %}

<style>
  @media (min-width: 769px) and (max-width: 1024px) {
    .np-header-logo-image {
      height: 40px;
    }
  }

  @media (max-width: 768px) {
    .np-header-search-input:focus {
      color: black;
    }

    #closing-button {
      border: none;
      background: transparent;
    }

    .np-header-mobile-menu-content-nav {
      padding: 0 1.25rem;
    }

    .mobile-header-link {
      display: flex;
      justify-content: space-between;
      padding-top: 15px;
      padding-bottom: 25px;
      margin-top: 1rem;
      border-bottom: 1.08108px solid #BFD6ED;
      padding-left: 6px;
      padding-right: 10px;
      background: transparent;
      box-shadow: none;
      color: black;
      font-family: "F37 Moon";
      font-style: normal;
      font-weight: normal;
      font-size: 19.4595px;
    }

    .np-header {
      background-color: #EBF5FF;
    }

    .np-header-content {
      justify-content: space-between;
    }

    .np-header-mobile-menu-content {
      background-color: #EBF5FF;
      padding-top: 30px;
    }

    .np-header-mobile-menu-content-avatar {
      height: 50px;
      width: 50px;
      margin-top: 0;
    }

    .np-header-mobile-menu-content-name {
      font-family: "F37 Moon";
      font-style: normal;
      font-weight: normal;
      font-size: 19.4595px;
      color: black;
    }

    .np-header-search-input {
      font-family: "F37 Moon";
      font-style: normal;
      font-weight: normal;
      font-size: 19.4595px;
      color: black;
      border: none;      
      padding: 0 0 0 50px;
      background-color: #EBF5FF;
    }

    .np-header-search-input::placeholder {
      color: black;
      font-family: "F37 Moon";
      font-style: normal;
      font-weight: normal;
      font-size: 19.4595px;
    }

    @media (max-width:425px) {
      .np-header-mobile-menu-content {
        background-color: #EBF5FF;
        padding-top: 30px;
      }

      .mobile-header-dropdown {
        display: flex;
        align-items: center;
        width: 88%;
        justify-content: space-between;
      }

      .user-container-mobile {
        display: flex;
        align-items: center;
        width: 88%;
        justify-content: space-between;
        padding-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1.08108px solid #BFD6ED;
      }

      .np-header-search {
        background-color: #EBF5FF;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1.08108px solid #BFD6ED;
      }

      .np-header-search-icon {
        color: black;
        left: 2%;
        top: 2rem;
      }
    }

    @media (min-width: 426px) and (max-width: 768px) {
      .np-header-search-input {
        float: none;
        width: 100%;
        opacity: unset;

      }

      .np-header-search-input:focus {
        padding: 0;
        margin-left: 50px;
        width: 92%;
      }

      .np-header-search-input:focus {
        padding: 0;
        margin-left: 50px;
        width: 92%;
      }

      .np-header-mobile-menu-content {
        background-color: #EBF5FF;
        padding-top: 0;
        margin-top: -55px;
      }

      .mobile-header-dropdown {
        display: flex;
        align-items: center;
        width: 95%;
        justify-content: space-between;
      }

      .user-container-mobile {
        display: flex;
        align-items: center;
        width: 95%;
        justify-content: space-between;
        padding-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1.08108px solid #BFD6ED;
      }

      .np-header-search {
        background-color: #EBF5FF;
        padding-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1.08108px solid #BFD6ED;
      }

      .np-header-search-icon {
        color: black;
        left: 1%;
        top: 2rem;
      }

      .np-header-search-input::placeholder {
        padding-left: 90%;
      }
    }

    @media (max-width: 320px) {
      .np-header-search-input::placeholder {
        padding-left: 72%;
      }

      .np-header-mobile-menu-content {
        padding-top: 0;
        margin-top: -55px;
      }
    }

    @media (min-width: 321px) and (max-width: 375px) {
      .np-header-search-input::placeholder {
        padding-left: 75%;
      }

      .np-header-mobile-menu-content {
        padding-top: 0;
        margin-top: -55px;
      }
    }

    @media (min-width: 376px) and (max-width: 425px) {
      .np-header-search-input::placeholder {
        padding-left: 78%;
      }

      .np-header-mobile-menu-content {
        padding-top: 0;
        margin-top: -55px;
      }
    }
  }
</style>