{% if current_person.signed_in? == false %}
  <script>
    if (localStorage.getItem('learnerCompletedAdditionalInfo') == null) {
        if(localStorage.getItem('registered') == null){
          window.location.href = '/learners/sign_in'
        } else {
          if(localStorage.getItem('learnerCompletedAdditionalInfo') == true){
            window.location.href = '/app/dashboard'
          } else {
            window.location.href = '/app/sign-up-follow-up'
          }
        }
      //setTimeout(() => {
      //}, 500)
    }
  </script>
{% else %}
  <script>
    let learnerEmail = `{{current_person.email}}`;

    let lockUser = true;
    {% if current_person.groups.any? %}
      {% for group in current_person.groups %}
        {% if group.id == '5160fa98-40bc-4bfc-af66-fca85465bdd2' %}
          lockUser = false;
        {% endif  %}
      {% endfor %}
    {% endif  %}


    const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if(regexExp.test(learnerEmail) == true){
      let domain = learnerEmail.split('@')[1];
      domain = `@${domain.toLowerCase()}`;

      let rawDomains = `{{ current_school.properties.master_domain_list }}`;

      let allDomains = rawDomains.toLowerCase();
      allDomains = allDomains.split('\n');

      if(allDomains.indexOf(domain) > -1){
		if (domain.includes('anthology.com')) {
		  console.log("Anthology domain found")
          $.ajax({
            url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/locked-user-found",
            data: JSON.stringify({
              email: '{{ current_person.email }}',
              id: '{{ current_person.id }}'
            }),
            method: 'POST',
            success: function(res){
              console.log(res)
            },
            error: function (xhr, status, error) {
            }
          });
		}
      } else {
          $.ajax({
            url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/locked-user-found",
            data: JSON.stringify({
              email: '{{ current_person.email }}',
              id: '{{ current_person.id }}'
            }),
            method: 'POST',
            success: function(res){
              console.log(res)
            },
            error: function (xhr, status, error) {
            }
          });
      }
    }
  </script>

  {% if current_person.properties.learner_completed_additional_info == false %}
    {% unless current_person.email contains '+preview-' %}
      <script>
        if (localStorage.getItem('learnerCompletedAdditionalInfo') == null || localStorage.getItem('learnerCompletedAdditionalInfo') == false) {
          window.location.href = '/app/sign-up-follow-up'
        }
      </script>
    {% endunless %}
  {% else %}
    <script>
      localStorage.removeItem('registered');
      localStorage.removeItem('learnerCompletedAdditionalInfo')
    </script>
  {% endif %}
{% endif %}


{%- comment -%} {% if current_person.signed_in? == true and current_person.properties.learner_completed_additional_info == false %}
  {% unless current_person.email contains '+preview-' %}
    <script>
      if (localStorage.getItem('learnerCompletedAdditionalInfo') == null || localStorage.getItem('learnerCompletedAdditionalInfo') == false) {
        window.location.href = '/app/sign-up-follow-up'
      } else {
        window.location.href = '/app/dashboard'
      }
    </script>
  {% endunless %}
{% endif %} {%- endcomment -%}

{%- comment -%} Desktop Header {%- endcomment -%}
<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>

    <div style="align-items: center; display: flex; flex-direction: row;">
      {%- comment -%} School Desktop View Logo {%- endcomment -%}
      {% 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 %}

      {%- comment -%} Desktop Search Box {%- endcomment -%}
      {% if current_person.signed_in? %}
        {% comment %} <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> {% endcomment %}
        {% comment %} <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span> {% endcomment %}
        <form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper np-hidden-mobile" style="margin-left: 25px;">
          <input
            aria-label="Search"
            class="np-header-search-input np-header-font-background-color catalog-search"
            type="text"
            name="q"
            placeholder="What do you want to learn?"
          />
          <i class="search-icon far fa-search"></i>
        </form>
        {% comment %} <form data-test="desktop-search" class="catalog-search-wrapper np-hidden-mobile" style="margin-left: 25px;">
            <input
              aria-label="search_topics"
              class="np-header-font-background-color catalog-search"
              type="text"
              name="q"
              placeholder=""
              onkeyup="searchCourses()"
            />
            <i class="far fa-search search-icon"></i>
        </form> {% endcomment %}
      {% endif %}
    </div>

    {%- comment -%} Desktop Nav Links {%- endcomment -%}
    <div class="np-hidden-mobile np-header-desktop-nav">
      {%- comment -%} <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> {%- endcomment -%}
      {% comment %} <div class="np-sub-navigation-content">
        {% for link in navigations.sub_navigation %}
          {% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
            <div class="np-sub-navigation-content-item {{ link.active_class }}">
              <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
                <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
                {{ link.label }}
              </a>
              <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
            </div>
          {% endunless %}
        {% endfor %}
      </div>
    </div> {% endcomment %}

    
    {% if current_person.signed_in? %}
      {%- comment -%} Desktop Profile Button {%- endcomment -%}
      <div class="np-hidden-mobile np-header-avatar">
        {%- comment -%} <a class="header-survey-link" href="https://baseline.campuslabs.com/htu/beta" target="_blank">
          Tell Us What You Think!
        </a> {%- endcomment -%}

        <button
          class="np-header-avatar-button desktop-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>

        <span class="header-username">{{ current_person.name }}</span>
      </div>
    {% else %}
      {%- comment -%} Desktop Sign In Button {%- endcomment -%}
      <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>

{%- comment -%} Mobile Header {%- endcomment -%}
<div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
    {%- comment -%} {% 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 %} {%- endcomment -%}
    <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 %}
        <a
          href="{{ website_navigation.path }}"
          class="np-header-mobile-menu-content-button"
          {% if website_navigation.external? %} target="_blank" {% endif %}
        >
          {{ website_navigation.name }}
        </a>
      {% endfor %}
      <a
        href="https://baseline.campuslabs.com/htu/beta" target="_blank"
        class="np-header-mobile-menu-content-button"
      >
        Survey
      </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 np-danger"
        href="{% route logout %}"
      >
        {% t .sign_out %}
      </a>
    </div>
  </div>
</div>

{% include "messages" %}


<script>
  let nameAdjuster = () => {
    let allCardNames = document.querySelectorAll('.course-card-title');

    for(let i = 0; i < allCardNames.length; i++){
      let base = allCardNames[i].textContent.slice(0, 95);
      if(base.length > 94){
        allCardNames[i].textContent = base.trim() + '...'
      }
    }
  }

  $( document ).ready(function() {
    nameAdjuster();
  });
</script>

<style>
  .search-and-filter-component{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .catalog-search-wrapper{
    max-width: 600px;
    position: relative;
  }

  .catalog-search-component{
    margin-bottom: 15px;
    width: 100%;
  }

  .catalog-search::placeholder{
    color: #878787;
  }

  .catalog-search,
  .catalog-search:focus{
    background-color: #fefefe;
    border: 1px solid #aa7fb9;
    border-radius: 30px;
    font-weight: 400;
    height: 60px;
    line-height: 1;
    padding-left: 75px;
    text-decoration: none;
    /* width: 100%; */
    width: 450px;
  }

  .search-icon{
    left: 30px;
    position: absolute;
    top: 23px;
  }

  @media screen and (min-width: 678px){
    .header-survey-link{
      color: #000;
      cursor: pointer;
      font-size: 16px;
      font-weight: 400;
      line-height: 25px;
      padding-right: 15px;
      text-decoration: none;
    }
  }

  @media screen and (min-width: 768px){
    .search-and-filter-component{
      align-items: center;
      flex-direction: row;
    }

    .catalog-search-component{
      margin-bottom: 0;
    }
  }
</style>