{% comment %}
3p Sandbox Group UUID = 490ab1f6-9ac0-4d02-9234-07707bee700b
Basic Sandbox Group UUID = 9f5c51a3-8e02-4b81-9e48-7ec3adff7c70
{% endcomment %}

{% assign basic_3p_user = false %}
{% if current_person.groups.any? %}
	{% for group in current_person.groups  %}
		{% if group.id == '9f5c51a3-8e02-4b81-9e48-7ec3adff7c70' or group.id == '490ab1f6-9ac0-4d02-9234-07707bee700b' %}
			{% assign basic_3p_user = true %}
		{% else %}
		{% endif %}
	{% endfor %}
		{% else %}
{% 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 mobile-menu-open np-hidden np-header-font-color"
          data-toggle-target=".np-header-mobile-avatar-menu,
          .np-header-mobile-menu-content, .np-main, .np-footer"
        >
          <i class="fal fa-times"></i>
          <div class="user-profile">
            {% if current_person.first_name %}
              {{current_person.first_name | slice: 0}}
            {% endif %}
          </div>
        </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=".mobile-menu-open, .np-header-mobile-menu-content, .np-main, .np-footer"
        >
          <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
          </svg>
          <div class="user-profile">
            {% if current_person.first_name %}
              {{current_person.first_name | slice: 0}}
            {% endif %}
          </div>
        </button>
      {% endif %}
    </div>
    {% if current_school.logo_url %}
      <h1 class="np-header-logo">
        <a href="{% route home %}">
          <img
            alt="Scintilla Learn"
            class="np-header-logo-image"
            src="http://i5.walmartimages.com/dfw/63925b23-d1f5/k2-_a36e7b0e-4797-4a93-aebb-cc2248fb80dc.v1.png"
          />
        </a>
        <div class="header-dropdown-container np-hidden-mobile">
          <div class="dropdown-arrow"></div>
          <div class="header-dropdown">
            <a href="https://www.scintilla.com/apps">Scintilla</a>
            <a href="https://www.scintilla.com/shopperbehavior">Shopper Behavior</a>
            <a href="https://www.scintilla.com/customerperception">Customer Perception</a>
            <a href="https://www.scintilla.com/reportbuilder">Report Builder</a>
            <a href="https://www.scintilla.com/channelperformance/">Insights</a>
          </div>
        </div>
        <div class="header-dropdown-container np-hidden-desktop">
          <div class="dropdown-arrow"></div>
          <div class="header-dropdown">
            <a href="https://www.scintilla.com/apps">Scintilla</a>
            <a href="https://www.scintilla.com/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
            <a href="https://www.scintilla.com/customerperception">Customer Perception</a>
            <a href="https://www.scintilla.com/reportbuilder">Report Builder</a>
            <a href="https://www.scintilla.com/channelperformance/selectcategories">Insights</a>
          </div>
        </div>
        <div class="header-text np-hidden-desktop">Learn</div>
        <div class="header-text np-hidden-mobile">Scintilla Learn</div>
      </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 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
        >
          <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
          </svg>
          <div class="user-profile">
            {% if current_person.first_name %}
              {{current_person.first_name | slice: 0}}
            {% endif %}
          </div>
        </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">
            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/profile">Profile</a>
            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/admin">Admin</a>
            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/support">Support</a>
            <a
              class="np-header-avatar-tooltip-navigation-link np-danger"
              href="{% route logout %}"
            >
              Logout
            </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 %}
      </div>
    {% endif %}
  </div>
</header>

<div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
    <div class="np-header-mobile-menu-content-nav" style="margin-top:16px;">
      <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.sub_navigation %}
        {% unless website_navigation.label == "Events" %}
          <a
            href="{{ website_navigation.url }}"
            class="np-header-mobile-menu-content-button"
          >
            {{ website_navigation.label }}
          </a>
        {% endunless %}
      {% endfor %}
      <a
        href="/app/articles"
        class="np-header-mobile-menu-content-button"
      >
        Articles
      </a>
      <a
        href="/app/certificates"
        class="np-header-mobile-menu-content-button"
      >
        Certificates
      </a>
      <div class="np-header-mobile-menu-content-line"></div>
      <a
        class="np-header-mobile-menu-content-button np-danger"
        href="{% route logout %}"
      >
       Logout
      </a>
    </div>
  </div>
</div>

{% include "messages" %}



<style>

  .np-header-content {
    max-width:1920px;
    margin:auto;
  }

  .np-header-logo {
    justify-content: flex-start;
    margin: 0 auto 0 0;
    flex-grow:unset;
    position:relative;
    align-items:center;
  }

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

  .dropdown-arrow {
    position: relative;
    cursor: pointer;
    padding: 0 22px;
    height: 64px;
    left: 0;
  }

  .dropdown-arrow:after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    font-weight: 400;
    font-size: 13px;
    transition: transform 0.2s;
    color: #333;
  }

  .header-dropdown-container.np-hidden-mobile:hover .dropdown-arrow:after,
  .header-dropdown-container.np-hidden-desktop.open .dropdown-arrow:after {
    transform: rotate(180deg) translateY(5px);
  }

  .header-dropdown {
    display:none;
    position:absolute;
    background-color:#fff;
    z-index:10;
    left:32px;
    top: 56px;
    padding: 8px 0;
    font-size:16px;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
    min-width:220px;
  }

  .header-dropdown-container.np-hidden-mobile:hover .header-dropdown,
  .header-dropdown-container.np-hidden-desktop.open .header-dropdown  {
    display:block;
  }

  .header-dropdown a {
    display:block;
    padding: 16px;
    color:#282828;
    text-decoration:none;
    font-size:16px;
    font-weight:400;
  }

  .header-dropdown a:hover {
    background-color:#F2F2F2;
  }

  .np-header-logo .header-text {
    font-size:24px;
    font-weight:400;
  }

  .user-profile {
    background-color: #3C228A;
    color: #fff;
    border-radius: 50%;
    width: 26px;
    min-width: 26px;
    height:26px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    margin-left:14px;
  }

  .np-header-mobile-menu-content .user-profile {
    margin-top: 24px;
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .np-header-avatar-tooltip-navigation-link {
    font-weight: 400;
    font-size:16px;
    color:#333;
    padding:22px 16px;
  }

  .np-header-avatar-tooltip-navigation-link:hover {
    background: #F2F2F2;
    font-weight: 400;
  }

  .np-header-search-input {
    background-color:#F2F2F2;
    opacity: 0.15;
    border-radius: 4px;
  }

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

  .np-header-avatar-button,
  .np-header-mobile-menu-nav-button {
    border: 1px solid #DADCE0;
    padding: 4px 4px 4px 10px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    width:auto;
    font-size:16px;
  }

  .np-header-avatar-tooltip {
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
    box-shadow:none;
  }

  .np-header-mobile-menu-content-nav {
    padding: 32px 16px;
  }

  .np-header-mobile-menu-content-button {
    color:#333;
  }

  @media (min-width:768px) {
    .np-header {
      padding: 0 32px;
    }

    .np-header-search-input:focus {
      background:#F2F2F2;
      border:none;
    }

    .user-profile {
      width: 30px;
      min-width: 30px;
      height:30px;
    }

    .header-dropdown {
      top: 50px;
    }
  }

  @media (min-width:1200px) {
    .np-header-desktop-nav-list {
      margin-right:48px;
    }

    .np-header-desktop-nav-item {
      padding: 16px 24px;
    }
  }
</style>