<header class="np-header np-header-color">
  <div class="np-header-content">
    <div class="header-left">
      {% if current_school.logo_url %}
        <h1 class="np-header-logo">
          <a href="https://quantuvos.com/">
            <img
              alt="{{ current_school.name }}"
              class="np-header-logo-image"
              src="{{ current_school.logo_url }}"
            />
          </a>
        </h1>
      {% else %}
        <a href="{% route home %}" class="np-school-name np-header-font-color">
          {{ current_school.name }}
        </a>
      {% endif %}
      <div class="tablet-hidden" id="header-explore-button" onclick="toggleExploreDropdown()">
        <i class="fal fa-bars"></i> Explore 
      </div>
    </div>
    <div class="header-middle tablet-hidden">
      {% include 'header_desktop_top_menu' %}
    </div>
    <div class="header-right">
      {% if current_person.signed_in? %}
      <div class="header-search-button" onclick="toggleSearch()">
        <i class="far fa-search"></i>
      </div>
      <div class="np-header-font-color tablet-visible" onclick="toggleSideMenu()" id="side-menu-open-button">
        <i class="far fa-bars" style="pointer-events: none;"></i>
      </div>

      <div class="tablet-hidden 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 %}">
              {% t .sign_out %}
            </a>
          </nav>
        </div>
      </div>
      {% else %}
        <div class="header-desktop-login tablet-hidden">
          <a href="{% route login %}">
            Log in
          </a>
        </div>
        <div class="header-desktop-signup tablet-hidden">
          <a href="">
            Sign up
          </a>
        </div>
      {% endif %}
    </div>
  </div>
</header>

{% comment %} <div class="header-blank-space"></div> {% endcomment %}
<div class="np-hidden" id="gray-background"></div>
<div id="header-desktop-dropdown" class="np-hidden"></div>

{% include "header_mobile_side_menu" %}
{% include "header_search" %}
{% comment %}{% include "header_desktop_explore" %}{% endcomment %}
{% include "messages" %}

<style>
  header.np-header {
    position: fixed;
    top: 0px;
    height: 90px;
  }
  .header-left, .header-middle, .header-right {
    display: flex;
    align-items: center;
  }
  .header-blank-space {
    height: 120px;
  }
  .header-right {
    font-size: 1.3rem;
  }
  #header-explore-button {
    display: none !important;
    color: rgb(212, 216, 93);
    margin-left: 50px;
    padding: 4px 12px;
    border-radius: 8px;
  }
  #header-explore-button:hover {
    background: rgba(255,255,255,.15);
  }
  .header-search-button .fa-search {
    color: white;
    margin-right: 16px;
  }
  #header-explore-button .fa-bars {
    margin-right: 8px;
  }
  header.np-header, .header-blank-space {
    height: 90px;
  }
  .np-header-logo {
    flex-grow: 0;
    margin: 0;
  }
  .np-header-content {
    flex-direction: row;
    justify-content: space-between;
  }
  #gray-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(24,24,26,.7);
  }
</style>
