{% if current_person.signed_in? %}
  {% unless current_person.email contains "+preview" %}
    {% if current_person.properties.additional_user_info_complete == false %}
      <script>
        console.log('user not completed additional info - redirect to additional signup')

        if (localStorage.getItem('learnerCompletedSecondaryRegistration') != null) {
          const secondaryInfoStored = localStorage.getItem("learnerCompletedSecondaryRegistration")
          const learnerCompany = localStorage.getItem("learnerCompany")
          const learnerCity = localStorage.getItem("learnerCity")
          const learnerState = localStorage.getItem("learnerState")
          const learnerCountry = localStorage.getItem("learnerCountry")
          const learnerRole = localStorage.getItem("learnerRole")
          const learnerSpecialty = localStorage.getItem("learnerSpecialty")

          if ( learnerCompany != null && learnerCity != null && learnerState != null && learnerCountry != null &&  learnerRole != null && learnerSpecialty != null ) {
             let userData = {
              learner_uuid: '{{current_person.id}}',
              company: learnerCompany,
              city: learnerCity,
              state: learnerState,
              country: learnerCountry,
              role: learnerRole,
              specialty: learnerSpecialty,
            }
            rerunAdditionalLearnerInfoWorkflow(userData)
          }
        } else {
          window.location.replace('/app/sign-up-cont')
        }

        function rerunAdditionalLearnerInfoWorkflow(data) {
          console.log("re-running workflow with data: ", data)

          $.ajax({
            url: "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/additional-learner-info",
            data: JSON.stringify(data),
            method: 'POST',
            success: function(res){
              console.log(res)
            },
            error: function (xhr, status, error) {
              console.error("Error posting to workato!", error);
            }
          });
        }
      </script>
    {% elsif current_person.properties.additional_user_info_complete == true %}
      <script>
        console.log("property is set, can delete local storage")
        localStorage.removeItem("learnerCompletedSecondaryRegistration")
        localStorage.removeItem("learnerCompany")
        localStorage.removeItem("learnerCity")
        localStorage.removeItem("learnerState")
        localStorage.removeItem("learnerCountry")
        localStorage.removeItem("learnerRole")
        localStorage.removeItem("learnerSpecialty")
      </script>
    {% else %}
      <script>
        console.log("custom prop doesn't exist")

        if (localStorage.getItem('learnerCompletedSecondaryRegistration') != null) {
          const secondaryInfoStored = localStorage.getItem("learnerCompletedSecondaryRegistration")
          const learnerCompany = localStorage.getItem("learnerCompany")
          const learnerCity = localStorage.getItem("learnerCity")
          const learnerState = localStorage.getItem("learnerState")
          const learnerCountry = localStorage.getItem("learnerCountry")
          const learnerRole = localStorage.getItem("learnerRole")
          const learnerSpecialty = localStorage.getItem("learnerSpecialty")

          if ( learnerCompany != null && learnerCity != null && learnerState != null && learnerCountry != null &&  learnerRole != null && learnerSpecialty != null ) {
             let userData = {
              learner_uuid: '{{current_person.id}}',
              company: learnerCompany,
              city: learnerCity,
              state: learnerState,
              country: learnerCountry,
              role: learnerRole,
              specialty: learnerSpecialty,
            }
            rerunAdditionalLearnerInfoWorkflow(userData)
          }
        } else {
          window.location.replace('/app/sign-up-cont')
        }

        function rerunAdditionalLearnerInfoWorkflow(data) {
          console.log("re-running workflow with data: ", data)

          $.ajax({
            url: "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/additional-learner-info",
            data: JSON.stringify(data),
            method: 'POST',
            success: function(res){
              console.log(res)
            },
            error: function (xhr, status, error) {
              console.error("Error posting to workato!", error);
            }
          });
        }
      </script>
    {% endif %}
  {% endunless %}
{% endif %}

<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"
        >
          <i class="far fa-bars"></i>
        </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 }}"
          />
        </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">
      {% if current_person.signed_in? %}
        {% for link in navigations.sub_navigation %}
          {% unless link.url == "/app" or link.url == '/app/learning_paths' %}
            <li class= "np-header-desktop-nav-item {{ link.active_class }}">
              <a
                href="{{ link.url }}"
                class="np-header-desktop-nav-link np-header-font-color"
              >
                {% if link.label == 'Dashboard' %}
                  My Topics
                {% elsif link.label == 'Catalog' %}
                  All Content
                {% else %}
                  {{ link.label }}
                {% endif %}
              
              </a>
            </li>
          {% endunless %}
        {% endfor %}
          <li class= "np-header-desktop-nav-item">
            <a
              href="/app/product-education"
              class="np-header-desktop-nav-link np-header-font-color"
            >
             Product Education           
            </a>
          </li>
      {% endif %}
        {% 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 np-header-font-background-color"
            type="text"
            name="q"
            placeholder="{% t .search %}"
          />
          <i class="np-header-search-icon far fa-search"></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
        >
          <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 %}
      <a
        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
        href="{% route login %}"
      >
        {% t shared.sign_in %}
      </div>
    {% 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 website_navigation in navigations.header_navigations %}
        {% unless website_navigation.path == '/app/learning_paths' %}
          <a
            href="{{ website_navigation.path }}"
            class="np-header-mobile-menu-content-button"
            {% if website_navigation.external? %} target="_blank" {% endif %}
          >
              {% if website_navigation.name == 'Dashboard' %}
                My Topics
              {% elsif website_navigation.name == 'Catalog' %}
                All Topics
              {% else %}
                {{ website_navigation.name }}
              {% endif %}
          </a>
        {% endunless %}
      {% endfor %}
          <a
            href="/app/catalog"
            class="np-header-mobile-menu-content-button"
          >
            All Content          
          </a>
          <a
            href="/app/product-education"
            class="np-header-mobile-menu-content-button"
          >
            Product Education           
          </a>
      <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 logout-button"
        href="{% route logout %}"
      >
        {% t .sign_out %}
      </a>
    </div>
  </div>
</div>

{% include "messages" %}

<style>

  .np-header-mobile-menu-nav-button .fa-bars {
    font-size:25px;
  }

  .np-header-logo {
    margin:0;
  }

  .np-header-logo img.np-header-logo-image {
    height:30px;
  }

  .np-header-mobile-menu-content {
    background-color:#f3f3f3;
  }

  .np-header-mobile-menu-content-button.logout-button {
    background-color: transparent;
    border: 3px solid #009999;
  }


  .np-header-desktop-nav-link {
    font-size: 16px;
  }

  .np-header-desktop-nav-item.np-sub-navigation-content-item-active {
    font-weight: 700;
  }

  @media screen and (min-width: 768px) {
    .np-header {
      height: auto;
      padding: 12px 4%;
    }

    .np-header-desktop-nav-list {
      margin: 0;
    }

    .np-header-search-input {
      background:transparent;
    }

    .np-header-search-icon {
      color:#212121;
    }
  }

  @media (min-width:992px) {
    .np-header-logo img.np-header-logo-image {
      height:40px;
    }
  }
</style>

<script>
  if (window.location.pathname.includes("/app/product-education")) {

    $(".np-header-desktop-nav-item a[href='/app/product-education']").parent().addClass("np-sub-navigation-content-item-active")
  }
</script>