
  <script>
    document.querySelector("body").classList.add("new-styles")
  </script>

<header class="np-header np-header-color new-header-styles">
  <div class="np-header-content np-max-width">

    {% 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">

          <li class= "np-header-desktop-nav-item videos-link">
            <a
              href="/app/dashboard"
              class="np-header-desktop-nav-link np-header-font-color"
            >
              My Dashboard
            </a>
          </li>
          <li class= "np-header-desktop-nav-item videos-link">
            <a
              href="/app/catalog"
              class="np-header-desktop-nav-link np-header-font-color"
            >
              Course Catalog
            </a>
          </li>

      </ul>
    </div>

    {% if current_person.signed_in? %}
      {% assign current_language = "English" %}
      {% if current_person.properties.language == "en" %}
        {% assign current_language = "English" %}
        {% assign current_language = "EN" %}
      {% elsif current_person.properties.language == "es" %}
        {% assign current_language = "Español" %}
        {% assign current_language = "ES" %}
      {% endif %}

      <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">{{current_language | upcase}}
        </button>
        <div id="myDropdown" class="dropdown-content">
            <a onclick="setLang('es')">Español</a>
            <hr class="divider">
            <a onclick="setLang('en')">English</a>
            <hr class="divider">
        </div>
      </div>
    {% endif %}

    <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_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 fa fa-search"></i>
        </form>
      </div>
    {% endcomment %}
      <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
        >

            <i class="fal fa-user-circle"></i>
        </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 new-header-styles">
  <div class="np-header-mobile-menu-content np-hidden">
    <div class="np-header-mobile-menu-content-nav">
      <a
        href="/app/dashboard"
        class="np-header-mobile-menu-content-button"
      >
        My Dashboard
      </a>
      <a
        href="/app/catalog"
        class="np-header-mobile-menu-content-button"
      >
        Catalog
      </a>
      {% unless current_school.sso_active? %}
        <a
          class="np-header-mobile-menu-content-button profile-settings-link"
          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" %}
{% if current_person.signed_in? %}
{% assign lang = current_person.properties.language %}

{% case lang %}
  {% when "Spanish" %}
    {% include "spanish_lang" %}
{% endcase %}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function setLang(lang) {
  var data = {
            uuid : '{{current_person.id}}',
            language : lang
        };
  $.ajax({
      type : 'POST',
      url : 'https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/language-change',
      data: JSON.stringify(data),
      success:function (data) {
          console.log(data);
          setTimeout(location.reload.bind(location), 700);
      },
      error: function(xhr, status, error) {
          console.log(error)
    }
  });
}

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

if (window.location.pathname == "/app/videos") {
  document.querySelector(".videos-link .np-header-desktop-nav-link").classList.add("np-sub-navigation-content-item-active")
}
</script>

{% endif %}
<style>

.new-header-styles.np-header {
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), 0px 4px 4px rgb(0 0 0 / 25%);
  position:relative;
  position:fixed;
  top:0;
  z-index: 2817948196;
}

.np-header-mobile-menu-nav {
  position:relative;
  margin-right:12px;
}

.np-header-mobile-menu-nav .np-header-mobile-menu-nav-button {
  color:#ffd700;
}

.np-header-logo {
  justify-content: flex-end;
  margin-right:16px;
}

.hr.divider {
  border-top: 4px solid black;
  border-radius: 5px;
}

.dropbtn {
  background-color: #ffd700;
  color: black;
  padding: 13px;
  font-size: 16px;
  line-height:16px;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  border-radius: 7px;
  max-height: 44px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  text-align: center;
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  border-radius: 4px;
  font-weight: 500;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  color: #ffd700;
  font-weight: 600;
  cursor: pointer;
}

.show {display: block;}

.new-header-styles .np-header-mobile-menu-content {
  background:#fff;
  z-index:49;
}

.new-header-styles .np-header-mobile-menu-content-nav {
  padding: 12px 0 0;
}

.new-header-styles .np-header-mobile-menu-content-button {
  border-bottom: 1px solid #000;
  box-shadow: none;
  justify-content: flex-start;
  padding: 16px;
  border-radius: 0;
  height: auto;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: #000F23;
}

.new-header-styles .np-header-mobile-menu-content-button.profile-settings-link {
  border-bottom: 0;
  margin-top: 16px;
  font-size: 16px;
}

.new-header-styles .np-header-mobile-menu-content-button.np-danger {
  margin: 0 0 32px;
  border: none;
  color: #48e3a0;
  font-weight: 500;
  padding-top: 0;
}

@media (min-width:768px) {
  .np-header {
    height:auto;
  }

  .new-styles .fa-user-circle {
    font-size:45px;
    color: #ffd700;
    transition: all 0.2s ease-in-out;
  }
  @media (max-width: 1200px) {
  .new-styles .fa-user-circle {
    font-size: 25px;
  }
  }
  .np-header-logo {
    justify-content: unset;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .np-header-logo-image {
    height: 60px;
    transition: all 0.2s ease-in-out;
  }
@media (max-width:1200px) {
  .np-header-logo-image {
    height: 30px;
  }
}
.np-header-desktop-nav-list {
  padding-inline-start: 10px;
}
  .np-header-desktop-nav-item {
    padding: 16px 8px;
  }

  .np-header-desktop-nav-link {
    transition:all 0.2s;
  }

  .np-header-desktop-nav-link:hover,
  .np-header-desktop-nav-link.np-sub-navigation-content-item-active {
    text-decoration:underline;
    color:#ffd700;
  }

  .new-header-styles .np-header-search-input,
  .new-header-styles .np-header-search-input:focus {
    border-radius:0;
    opacity:1;
    background:#fff;
    padding: 0 40px 0 16px;
    font-size:18px;
  }

  .new-header-styles .np-header-search-input:focus {
    border: 1px solid #ffd700;
  }

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

@media (min-width:1200px) {
  .np-header-desktop-nav-item {
    padding: 16px;
  }

  .np-header-desktop-nav-link {
    font-size: 20px;
  }
}
</style>

