<header class="header-desktop np-hidden-mobile">
  <div class="header-container">
    <div class="header-logo">
      <a href="/app">
        <img src="{{ current_school.logo_url  }}" alt="{{ current_school.name }}">
      </a>
    </div>
    <nav class="header-nav">
      <ul class="header-nav-list">
        <li class="header-nav-item">
          <form class="header-search" action="{% route search %}" method="get" data-test="desktop-search">
            <input
              aria-label="{% t .search %}"
              class="header-search-input"
              type="text"
              name="q"
              placeholder="Search"
            />
            <i class="header-search-button far fa-search"></i>
          </form>
        </li>
        <li class="header-nav-item">
          <a href="/app/dashboard" class="header-nav-link">
            My Courses
          </a>
        </li>
        <li class="header-nav-item">
          <a href="/app" class="header-nav-link">
            Home
          </a>
        </li>
        <li class="header-nav-item">
          <a href="/app/catalog" class="header-nav-link">
            All Courses
          </a>
        </li>
        <li class="header-nav-item">
          <a href="/app/training_events" class="header-nav-link">
            Live Training
          </a>
        </li>
        <li class="header-nav-item">
          <a href="/app/learning_paths" class="header-nav-link">
            Learning Paths
          </a>
        </li>
        <li class="header-nav-item learner-profile-button">
          <div class="np-hidden-mobile np-header-avatar">
            <button
              style="margin-left: 0;"
              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
            >
              <div
                class="header-nav-item learner-profile-button"
              >
                {{ current_person.name }}
              </div>
            </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>
        </li>
      </ul>
    </nav>
  </div>
</header>

<header class="header-mobile np-hidden-desktop">
  <div class="header-mobile-top">
    <div class="header-mobile-logo">
      <a href="/app">
        <img src="{{ current_school.logo_url  }}" alt="{{ current_school.name }}">
      </a>
    </div>
    <div class="header-mobile-top-right">
      <form class="header-search" action="{% route search %}" method="get" data-test="desktop-search">
        <input
          aria-label="{% t .search %}"
          class="header-search-input"
          type="text"
          name="q"
          placeholder="Search"
        />
        <i class="header-search-button far fa-search"></i>
      </form>
      <div class="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
        >
          <div
            class="header-nav-item learner-profile-button"
          >
            {{ current_person.name }}
          </div>
        </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 %}"
            >
              Settings
            </a>
          {% endunless %}
            <a
              class="np-header-avatar-tooltip-navigation-link np-danger"
              href="{% route logout %}"
            >
              Sign out
            </a>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <ul class="header-mobile-bottom">
    <li class="header-nav-item">
      <a href="/app/dashboard" class="header-nav-link">
        My Courses
      </a>
    </li>
    <li class="header-nav-item">
      <a href="/app" class="header-nav-link">
        Home
      </a>
    </li>
    <li class="header-nav-item">
      <a href="/app/catalog" class="header-nav-link">
        All Courses
      </a>
    </li>
    <li class="header-nav-item">
      <a href="/app/training_events" class="header-nav-link">
        Live Training
      </a>
    </li>
    <li class="header-nav-item">
      <a href="/app/learning_paths" class="header-nav-link">
        Learning Paths
      </a>
    </li>
  </ul>
</header>

<style>
  .header-search-input {
    border: 1px solid black;
    color: #231F20;
  }
  .header-search-input::placeholder {
    color: #231F20;
  }
  header {
    color: #231F20;
  }
  header > *a {
    text-decoration: none;
    color: #231F20;
  }
  .header-container {
    display: flex;
    justify-content: space-between;
    padding: 30px 5%;
    z-index: 1;
    width: 100%;
  }
  .header-logo {
    align-self: center;
    filter: invert(1);
  }
  .header-nav {
    width: 70%;
    max-width: 750px;
  }
  .header-nav-list {
    display: flex;
    margin: auto;
    list-style: none;
  }
  .header-nav-item {
    margin: auto;
    align-self: center;
  }
  .header-nav-item:first-child {
    margin-left: 0;
  }
  .header-nav-item:last-child {
    margin-right: 0;
  }  
  .header-nav-item:not(.learner-profile-button):hover {
    font-weight: 700;
  }
  .header-search {
    position: relative;
  }
  .header-search-input {
    background: none;
    padding: 8px 30px 8px 10px;
    max-width: 120px;
  }
  .header-search-input::placeholder {
    opacity: 100%;
  }
  .header-search-button {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: 0%;
  }
  .np-header-avatar-tooltip-navigation > * {
    color: black !important;
  }
  .np-header-avatar-tooltip-navigation > *:hover {
    color: black !important;
  }

  @media screen and (max-width: 920px) {
    .header-container {
      padding: 30px 3%;
    }
  }

  .header-mobile {
    z-index: 2;
    width: 100vw;
    padding: 20px 5%;
  }
  .header-mobile-top {
    display: flex;
    justify-content: space-between;
  }
  .header-mobile-top-right {
    display: flex;
  }
  .header-mobile-bottom {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
  }
  @media screen and (max-width: 768px) {
    .header-mobile-top {
      flex-direction: column;
    }
    .header-mobile-logo {
      margin: 0 auto 20px;
      filter: invert(1);
    }
    .header-mobile-top-right {
      justify-content: space-evenly;
      margin: 0;
    }
  }
</style>