<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 }}" />
          <div class="logo-text">Brighton Academy</div>
        </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 link in navigations.sub_navigation %}
          {% unless link.label == "Dashboard" %}
            <li class="np-header-desktop-nav-item">
              <a href="{% if link.label == 'Catalog' %}/app/courses{% else %}{{ link.url }}{% endif %}" class="np-header-desktop-nav-link np-header-font-color {{ link.active_class }}">
                {% if link.label == "Home" %}
                  Dashboard
                {% elsif link.label == "Catalog" %}
                  Courses
                {% elsif link.label == "Events" %}
                  Upcoming Events
                {% else %}
                  {{ link.label }}
                {% endif %}
              </a>
            </li>
          {% endunless %}
        {% endfor %}
        {% 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"
            type="text"
            name="q"
            placeholder="{% t .search %}" />
          <i class="np-header-search-icon far fa-search np-header-font-color"></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>
          <div>
            <span class="welcome-text">Welcome back,</span><br>
            <strong class="person-name-text">
              {% if current_person.first_name %}
                {{ current_person.first_name }}{% endif %}
              {% if current_person.last_name %}
                {{ current_person.last_name }}{% endif %}
            </strong>
          </div>
          <svg
            style="margin-left: 13px"
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="9"
            viewBox="0 0 21 13"
            fill="none">
            <path
              d="M1.0376 1.23193L10.5188 10.7129L20 1.23193"
              stroke="#0077B8"
              stroke-width="2" />
          </svg>
        </button>
        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
          <div>
            <span class="welcome-text">Welcome back,</span><br>
            <strong class="person-name-text">
              {% if current_person.first_name %}
                {{ current_person.first_name }}{% endif %}
              {% if current_person.last_name %}
                {{ current_person.last_name }}{% endif %}
            </strong>
          </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="/app/profile">
              Your Profile
            </a>
            <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>
</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 link in navigations.sub_navigation %}
        <a href="{{ link.url }}" class="np-header-mobile-menu-content-button {{ link.active_class }}">
          {% if link.label == "Home" %}
            Dashboard
          {% elsif link.label == "Events" %}
            Upcoming Events
          {% else %}
            {{ link.label }}
          {% endif %}
        </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" href="/app/profile">
        Your Profile
      </a>
      <a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
        {% t.sign_out %}
      </a>
    </div>
  </div>
</div>

{% include "messages" %}

<style>

  .np-header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .np-header-logo img {
    border-right: 1px solid #707070;
    padding-right: 16px;
  }

  .np-header-logo .logo-text {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin-left: 16px;
    color: #000;
  }

  .np-sub-navigation-content-item-inactive {
    color: #0077B8;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .np-sub-navigation-content-item-active {
    color: #185A7D!important;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-bottom: 1px solid #185A7D;
  }

  .np-header {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #185A7D;
    padding: 0 4%;
  }

  .np-header-avatar-button {
    text-align: left;
    display: flex;
    align-items: center;
  }

  .np-header-avatar-button i {
    margin-left: 12px;
  }

  .np-header-search-icon {
    color: #0077B8;
    font-size: 23px;
    font-weight: 400;
    line-height: normal;
  }

  .welcome-text {
    color: #185A7D;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
  }

  .person-name-text {
    color: #185A7D;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
  }

  .np-header-avatar-tooltip {
    top: 0;
    width: 100%;
    border: 1px solid #F0F0F0;
    background: #fff;
    box-shadow: 2px 1px 1.5px 0 rgba(0, 0, 0, 0.16);
  }

  .np-header-avatar-tooltip > div {
    padding-left: 20px;
    padding-top: 10px
  }

  .np-header-avatar-tooltip-navigation-link {
    color: #0077B8;
    font-size: 18px;
    font-weight: 500;
    line-height: 46px;
  }

  @media(min-width:768px) {
    .np-header {
      height: 120px;
    }

    .np-header-logo .logo-text {
      font-size: 20px;
    }
  }
</style>