<header class="np-header np-header-color" style='height: 50px;'>
  <div class="np-header-content">
    <div class='header-desktop-left'>
      {% if current_school.logo_url %}
        <h1 class="np-header-logo">
          <a href="{% route home %}">
            <img src="https://schoolkeep-production.s3.amazonaws.com/wysiwyg/c4231bd9-2caa-4eca-bdaa-92cd69c0a35f/20180105100241_logo_1.png" alt="{{ current_school.name }}"  style='display: flex;' class='logo-image'>
          </a>
        </h1>
      {% else %}
        <a href="{% route home %}" class="np-school-name np-header-font-color">
          {{ current_school.name }}
        </a>
      {% endif %}
    </div>
    <div class='header-desktop-right np-hidden-mobile-new'>
      <div class="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"
                style='font-weight: 700;'
              >
                {{ website_navigation.name }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
      {% if current_person.signed_in? %}
        <form action="{% route search %}" method="get" data-test="desktop-search" style="background: white; border-radius: 4px;" class='header-search-form' id='header-search-form'>
          <input
            aria-label="{% t .search %}"
            class="header-search-input"
            type="text"
            name="q"
            placeholder="Search by keyword"
          />
          <button class="far fa-search header-search-button" type="submit" form='header-search-form'></button>
        </form>
        <div class="np-hidden-mobile-new 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
            style='color: white; font-weight: 700;'
          >
            {{ current_person.name }}
          </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 %}"
              >
                {% t .sign_out %}
              </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>
    <div class='np-header-right-mobile np-hidden-desktop-new'>
      <i class="mobile-search-button far fa-search" id='mobile-search-button'></i>
      <i class="mobile-menu-button fas fa-bars" id='mobile-menu-button'></i>
    </div>
  </div>
</header>
<div class='bottom-header-search np-hidden np-hidden-desktop-new' id='menu-mobile-search-menu'>
  <form action="{% route search %}" method="get" data-test="desktop-search" style="background: white; border-radius: 4px;" class='menu-mobile-search-form' id='menu-mobile-search-form'>
    <input
      aria-label="{% t .search %}"
      class="menu-mobile-search-input"
      type="text"
      name="q"
      placeholder="Search by keyword"
    />
    <button class="far fa-search menu-mobile-search-button" type="submit" form='menu-mobile-search-form'></button>
  </form>
  <i class="menu-mobile-close fas fa-times"></i>
</div>
</div>

<div class="np-hidden-desktop-new np-hidden" id='mobile-menu-menu'>
  <i class="mobile-menu-close fas fa-times" id='mobile-menu-close'></i>
  <ul class="mobile-menu-list">
    {% for website_navigation in navigations.header_navigations_external %}
      <li class='mobile-menu-list-li'>
        <a href="{{ website_navigation.path }}" class='mobile-menu-list-element'>
          {{ website_navigation.name }}
        </a>
      </li>
    {% endfor %}
    <li class='mobile-menu-list-li'><a href="/app/account" class='mobile-menu-list-element'>My Profile</a></li>
    <li style='border-bottom: 1px solid #1a1a1a;'></li>
    <li class='mobile-menu-list-li'><a href="{% route logout %}" data-method="delete" rel="nofollow" class='mobile-menu-list-element'>Log Out</a></li>
  </ul>
</div>



{% include "messages" %}
<div class="main_site">

<style>
  .np-header-content {
    justify-content: space-between;
  }
  .header-desktop-right {
    display: flex;
    flex-direction: row;
  }
  .np-header-search {
    align-self: center;
  }
  .np-header-right-mobile {
    display: flex;
  }
  .np-header-search-icon:before {
    font-weight: 700;
    color: gray;
  }

  .mobile-menu-button {
    font-size: 1.5rem;
    color: white;
    padding: 10px;
    cursor: pointer;
  }
  .mobile-search-button {
    padding: 10px;
    cursor: pointer;
  }
  .mobile-search-button:before {
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    align-self: center;
  }
  .bottom-header-search {
    background: #00aae5;
    height: 50px;
    display: flex;
  }

  .header-search-form {
    height: 40px;
    display: flex;
    width: 20%;
    margin: auto;
  }
  .header-search-input {
    padding-left: 15px;
    border: none;
    width: 100%;
    background: none;
  }
  .header-search-input:focus-visible {
    outline: none;
  }
  .header-search-icon {
    right: .75rem;
    top: 0.6rem;

  }
  .header-search-icon:before {
    color: darkgray;
  }
  .header-search-button {
    width: 60px;
    font-size: 20px;
    font-weight: 700;
    color: gray;
    background: none;
    border: none;
    cursor: pointer;
  }

  .menu-mobile-search-form {
    height: 40px;
    display: flex;
    width: 70%;
    margin: auto;
  }
  .menu-mobile-search-input {
    padding-left: 15px;
    border: none;
    width: 100%;
    background: none;
  }
  .menu-mobile-search-input:focus-visible {
    outline: none;
  }
  .menu-mobile-search-icon {
    right: .75rem;
    top: 0.6rem;
  }
  .menu-mobile-search-icon:before {
    color: darkgray;
  }
  .menu-mobile-search-button {
    width: 60px;
    font-size: 20px;
    font-weight: 700;
    color: gray;
    background: none;
    border: none;
    cursor: pointer;
  }
  .menu-mobile-close {
    z-index: 100;
    position: absolute;
    padding: 15px;
    font-size: 20px;
    padding: auto;
    align-items: center;
    align-self: center;
    right: 5px;
    cursor: pointer;
  }
  #mobile-menu-menu {
    position: absolute;
    top: 0;
    right: -256px;
    width: 256px;
    background: #3b3f3d;
    z-index: 10000;
    height: 100%;
    pointer-events: all;
  }
  .mobile-menu-close {
    color: white;
    font-size: 1.5rem;
    top: 13px;
    position: absolute;
    left: 15px;
  }
  .mobile-menu-list {
    list-style-type: none;
    margin-top: 40px;
    padding-left: 10px;
  }
  .mobile-menu-list-element {
    color: #ccc;
    font-weight: 400;
    text-decoration: none;

  }
  .mobile-menu-list-li:hover * {
    color: #ffffff;
    text-shadow: none;
    cursor: pointer;
  }
  .mobile-menu-list-li:hover {
    background: #9b4b87;
  }
  .mobile-menu-list-li {
    padding: 8px 16px;
  }
  .np-header-desktop-nav-list {
    flex-wrap: nowrap;
  }
  @media screen and (min-width: 1056px) {
    .np-hidden-desktop-new {
      display: none !important;
    }
    .np-header-search-input {
      background:#fff;
      border:2px solid #bac4ca;
      border-radius:4px;
      color:#486776;
      font-size:15px;
      opacity:1;
      outline:none;
      padding:0 1.5rem 0 1rem;
      width:90%;
      height: 2.5rem;
    }
    .np-header-search-input::placeholder {
      color: black;
    }
    .np-header-search-input:focus {
    width: 90%;
    padding:0 1.5rem 0 1rem;
    }
  }
  @media (min-width:1643px) and (max-width:1738px) {
    .header-search-form {
      width: 14%;
    }
  }
  @media (min-width:1472px) and (max-width:1610px) {
    .header-search-form {
      width: 14%;
    }
  }
  @media (min-width:0px) and (max-width:1311px) {
    .header-search-form {
      width: 14%;
    }
    .header-search-input::placeholder {
      font-size: 13px;
    }
  }
  @media (min-width:1472px) and (max-width:1643px) {
    .np-header-desktop-nav-item {
      padding: 1rem 0.5rem;
    }
    .np-header-avatar-button {
      margin: 0 0 0 0.5rem;
    }
  }
  @media (min-width:1472px) and (max-width:1550px) {
    .np-header-desktop-nav-link {
      font-size: 14px;
    }
    .np-header-avatar-button {
      font-size: 14px;
    }
  }
  @media (min-width:1056px) and (max-width:1472px) {
    .np-header-content {
      flex-direction: column;
      align-items: unset;
    }
    .np-header {
      height: 100px !important;
    }
    .np-header-logo {
      margin-bottom: 0;
    }
    .header-desktop-left {
      margin-top: 1.5rem;
    }
    .header-desktop-right {
      margin-bottom: 1rem;
    }
    .np-header-desktop-nav-list {
      padding-left: 0;
    }
  }
  @media (min-width:1056px) and (max-width:1220px) {
    .np-header-desktop-nav-item {
      padding: 1rem 0.5rem;
    }
    .np-header-avatar-button {
      margin: 0 0 0 0.5rem;
    }
  }
  @media (min-width:1056px) and (max-width:1118px) {
    .np-header-desktop-nav-link {
      font-size: 14px;
    }
    .np-header-avatar-button {
      font-size: 14px;
    }
  }
  @media screen and (max-width: 1055px) {
    .np-hidden-mobile-new {
      display: none !important;
    }
    .np-header-content {
    flex-direction: row;
    }
  }
  @media screen and (max-width: 445px) {
    .logo-image {
      width: 250px;
    }
  }
  @media screen and (max-width: 400px) {
    .menu-mobile-search-form {
      width: 85%;
    }
  }
</style>

<script>
   var a = $("#mobile-menu-menu").children()
   var a = a.add($("#mobile-menu-menu"))
  $("#mobile-search-button").click(function() {
    $("#menu-mobile-search-menu").toggleClass('np-hidden');
  });
  $(".menu-mobile-close").click(function() {
    $("#menu-mobile-search-menu").toggleClass('np-hidden');
  });
  $("#mobile-menu-button").click(function() {
    $("#mobile-menu-menu").toggleClass('np-hidden');
    window.onscroll = function () { window.scrollTo(0, 0); };
    $('body').css({position: 'relative', left: '-256px'});
    $("#mobile-menu-menu")
    $('body:not(a)').css({pointerEvents: 'none', filter: 'grayscale(40%)'});
  })
  $('#mobile-menu-close').click(function(){
    $('body').css({position: '', left: '', filter: ''});
    $('body:not(a)').css({pointerEvents: ''});
    window.onscroll = function() {}
    $("#mobile-menu-menu").toggleClass('np-hidden');
  })
</script>