{% unless current_person.email contains '+preview' %}
  {% assign ready = false %}
  {% if current_person.signed_in? %}
    {% if current_person.properties.city
      and current_person.properties.state
      and current_person.properties.store_name 
      and current_person.properties.city.size > 0 
      and current_person.properties.state.size > 0
      and current_person.properties.store_name.size > 0 
    %}
      {% assign ready = true %}
    {% endif %}
  {% endif %}

  {% if ready == false %}
    <script>
      window.location.href = '/app/sign-up-follow-up'
    </script>
  {% endif %}
{% endunless %}

<header>
    {% if current_school.logo_url %}
    <div class="mizuno-logo">
        <a href="{% route home %}">
          <img
            alt="{{ current_school.name }}"
            class="np-header-logo-image"
            src="{{ current_school.logo_url }}"
          />
        </a>
    </div>
    {% 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 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>

    <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
      >
        <img
          alt="{{ current_person.name }}"
          class="np-header-avatar-image"
          src="{{ current_person.avatar_url }}"
        >
      </button>

      {%- comment -%} Desktop Profile Tooltip {%- endcomment -%}
      <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>
</header>


{% include "messages" %}

<style>
  body {
    background:#fff;
  }

  header {
     background-color: #001588;
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-bottom: 15px;
  }

  .mizuno-logo{
    padding: 15px 0;
    display: flex;
    justify-content: center !important;
  }

  .np-header-logo-image {
    display: block;
    margin: auto;
    height: 90px;
  }

  @media screen and (min-width: 768px){
    header {
      justify-content: space-between;
      margin-bottom: 18px; 
      padding-right: 70px;
    }

    .mizuno-logo {
      padding: 20px 50px;
      justify-content: flex-start !important;
    }

    .np-header-desktop-nav{
      align-items: center;
    }
  }
</style>