{% if current_person.signed_in? %}
  {% if current_person.properties.show_banner? %}
    {% if current_person.properties.is_primary_account == false %}
      {% include "info_banner" %}
    {% endif %}
  {% endif %}
{% endif %}

<header class="section-margin">
  <div class="marketing-nav-wrapper">
    <nav
      class="marketing-nav marketing-nav__primary hunt-margin-t"
      id="ShopifyMainNav"
      itemscope="itemscope"
      itemtype="https://schema.org/SiteNavigationElement"
      role="navigation"
      aria-label="Main Navigation"
      style="background-color: white !important;"
      >
      <a href="{{ current_school.logo_navigation_url }}" class="uk-brand">
        
        {% if current_school.logo_url %}
        <div class="marketing-nav__logo" style="margin-right: 0;">
          <a href="/">
            <img src="{{ current_school.logo_url }}" alt="{{ current_school.name }}">
          </a>
        </div>
        {% else %}
          <span class="uk-text-large uk-text-bold">{{ current_school.name }}</span>
        {% endif %}
      </a>
      <div class="uk-navbar-flip">
        <!-- uk-hidden-small -->
        <ul class="euclid-circular-regular hunt-desktop-nav  marketing-nav__items marketing-nav__user" style="margin-top: -5px;">     
          <li>
            <a href="#" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
              Courses
            </a>
          </li>
          <!-- <li class="">
            <a href="#" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
              Resources
            </a>
          </li> -->
          <li>
            <a href="/training_events" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
              Training Calendar
            </a>
          </li>
          <li>
            <a href="/resources" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
              Quick Links & Resources
            </a>
          </li>

          <li data-uk-dropdown="{mode:'click'}">
            <a href="#" class="learner-name marketing-nav__item marketing-nav__item--user">{{ current_person.name }}</a>
            <div class="uk-dropdown uk-dropdown-flip uk-dropdown-navbar">
              <ul class="uk-nav uk-nav-navbar">
                <li class="dropdown-item"><a href="{{ routes.my_content_path }}">My Courses</a></li>
                <li class="uk-nav-divider"></li>
                <li class="dropdown-item"><a href="{{ routes.log_out_path }}" data-method="delete" rel="nofollow">{% t .log_out %}</a></li>
              </ul>
            </div>
          </li>
          <li class="hunt-search">
            <div class="marketing-nav__item marketing-nav__item--user">
             {% include "catalog_search_form" with "" %}
            </div>
          </li>
        </ul>
        <!-- uk-visible-small -->
        <div class="hunt-mobile-nav ">
  
            <button class="uk-button uk-button-link uk-navbar-toggle mobile-search-toggle mobile-navbar-toggle" data-uk-toggle="{target:'#mobile-search'}">
            </button>
          <a href="#mobile-nav" class="mobile-navbar-toggle uk-navbar-toggle" data-uk-offcanvas></a>
        </div>
      </div>
    </nav>
  </div>
</header>
  <div id="mobile-search" class="school-website-header  uk-position-top uk-padding uk-block-default uk-flex uk-border-bottom {% if hide_search_box %}uk-hidden {% endif %}">
    {% include "search_form" with "" %}
    <a class="uk-button uk-button-link" href="{{ routes.my_content_path }}">Back</a>
  </div>
<div id="mobile-nav" class="uk-offcanvas">
  <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
    <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
      <li>
        <a href="/" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Home
        </a>
      </li>
      <li>
        <a href="/my_courses" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          My Courses
        </a>
      </li>
      <li>
        <a href="/training_events" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Training Calendar
        </a>
      </li>
      <li>
        <a href="/training_events" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Orientation
      </a>
      </li>
      <li>
        <a href="/catalog?filter%5Bcategories_name%5D=Mandatory+Courses" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Mandatory Courses
        </a>
      </li>
      <li>
        <a href="/catalog" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Categories
        </a>
      </li>
      <li>
        <a href="/catalog"" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          All Courses
        </a>
      </li>
      <li>
        <a href="/catalog?filter%5Bcategories_name%5D=On+Boarding" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          On Boarding
        </a>
      </li>
      <li>
        <a href="/catalog?filter%5Bcategories_name%5D=StudioPro" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          StudioPro
        </a>
      </li>
      <li>
        <a href="/resources" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Quick Links<br> & Resources</a>
        </a>
      </li>
      <li>
        <a href="mailto:detraining@elliman.com" target="_blank" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
          Contact Us
        </a>
      </li>
      <li class="uk-nav-divider"></li>
      <li>
        <a href="{{ routes.log_out_path }}" class="marketing-nav__item marketing-nav__item--user" itemprop="name" data-method="delete" rel="nofollow">{% t .log_out %}</a>
      </li>

    </ul>
  </div>
</div>



<style>
  .yellow-label {
    width: 100%;
    background-color: #FFC425;
    color: #FFC425;
  }
  .school-website-header {
    box-shadow: none !important;
  }

  .survey-tooltip {
    visibility: hidden;
    width: 300px;
    position: absolute;
    line-height: 3.5;
    min-height: 110px;
    font-size: 15px;
    border-radius: 3px;
    box-shadow: 3px 3px 11px rgba(0,0,0,0.08);
    transition: 0.1s;
    z-index: 10;
  }

  .live-workshops:hover .survey-tooltip {
    visibility: visible; 
  }

  .survey-tooltip:hover {
    visibility: visible;
  }

  .grey-background {
    background-color: rgb(249, 250, 252);
    padding: 0 20px;
  }

  .white-background {
    line-height: 2;
    padding: 10px 20px;
    background: #fff;
  }

  .dropdown-item {
    line-height: 1.5 !important;
  }

  .dropdown-item > a:hover {
    background-color: #009CBD !important;
  }
  
</style>

<script>
  if(window.location.pathname == "/") {
    document.querySelector("#mobile-search > a").setAttribute("href", "/");
  }
</script>