<header class="header-mobile">
  <a href="{% route home %}">
    <img
      alt="{{ current_school.name }}"
      class="header-mobile-logo"
      src="{{ current_school.logo_url }}"
    />
  </a>
  <div class="header-mobile-icons">
    <i class="fal fa-search header-mobile-search-icon"></i>
    <i class="fal fa-bars header-mobile-menu-icon"></i>
    <img class="header-mobile-avatar" src="{{ current_person.avatar_url }}" />
  </div>
  <div class="header-mobile-search-bar np-hidden">
    <form
      class="header-mobile-search-form"
      method="get"
      action="{% route search %}"
    >
      <button class="header-mobile-search-bar-button">
        <i class="fal fa-search"></i>
      </button>
      <input
        aria-label="Search"
        class="header-mobile-search-form-input"
        type="text"
        name="q"
        placeholder="Search"
      />
    </form>
    <i class="fal fa-times header-mobile-search-bar-close"></i>
  </div>
  <div class="header-mobile-menu np-hidden">
    <div class="header-mobile-menu-header">
      <a href="{% route home %}">
        <img
          alt="{{ current_school.name }}"
          class="header-mobile-logo"
          src="{{ current_school.logo_url }}"
        />
      </a>
      <i class="fal fa-times header-mobile-menu-header-close"></i>
    </div>
    <div class="header-mobile-menu-content">
      <div class="header-mobile-menu-content-section">
        <div class="header-mobile-menu-content-title">
          CATEGORY <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden "></i>
        </div>
        <ul class="header-mobile-menu-content-list np-hidden">
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
            href="/app/catalog#category-businessfoundations"
          >
            Business Foundations
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="/app/catalog#category-emailmarketingfundamentals"
          >
            Email Marketing Fundamentals
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="/app/catalog#category-expert-ledtutorials"
          >
            Expert-led Tutorials
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="/app/catalog#category-omnisendbasics"
          >
            Omnisend Basics
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="/app/catalog#category-productupdates"
          >
            Product Updates
            <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="/app/catalog#category-webinars"
          >
            Webinars
            </a>
          </li>
        </ul>
      </div>
      <div class="header-mobile-menu-content-section">
        <div class="header-mobile-menu-content-title">
          DIFFICULTY <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
        </div>
        <ul class="header-mobile-menu-content-list np-hidden">
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#diff-1"
            >
              Beginner
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#diff-2"
            >
              Advanced
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#diff-3"
            >
              Expert
            </a>
          </li>
        </ul>
      </div>
      <div class="header-mobile-menu-content-section">
        <div class="header-mobile-menu-content-title">
          DURATION <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
        </div>
        <ul class="header-mobile-menu-content-list np-hidden">
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#time-1"
            >
              &lt; 10 mins
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#time-2"
            >
              10-30 mins
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#time-3"
            >
              30-60 mins
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#time-4"
            >
              1-2 hours
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/catalog#time-5"
            >
              &gt; 2 hours
            </a>
          </li>
        </ul>
      </div>
      <div class="header-mobile-menu-content-section">
        <div class="header-mobile-menu-content-title">
          RESOURCES <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
        </div>
        <ul class="header-mobile-menu-content-list np-hidden">
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="https://www.omnisend.com/resources/blog/"
            >
              Blog
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="https://www.omnisend.com/resources/library/"
            >
              Library
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="https://www.omnisend.com/resources/reports/"
            >
              Reports
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="https://www.omnisend.com/resources/podcast/"
            >
              Podcast
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="https://www.omnisend.com/resources/interviews/"
            >
              Interviews
            </a>
          </li>
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="https://support.omnisend.com/en/"
            >
              Knowledge Base
            </a>
          </li>
        </ul>
      </div>
      <div class="header-mobile-menu-divider"></div>
      <div class="header-mobile-menu-content-section">
        <ul class="header-mobile-menu-content-list">
          {% if current_person.signed_in? %}
            <li class="header-mobile-menu-content-item">
              <a
                class="header-mobile-menu-content-link"
                href="https://app.omnisend.com/registrationv2?utm_source=academy&utm_medium=startfree&utm_campaign=academy"
              >
                Sign up for Omnisend
              </a>
            </li>
          {% endif %}
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="/app/faq"
            >
              FAQ
            </a>
          </li>
          {% if current_person.signed_in? %}
            {% unless current_school.sso_active? %}
              <li class="header-mobile-menu-content-item">
                <a
                  class="header-mobile-menu-content-link"
                  href="{% route account %}"
                >
                  Profile settings
                </a>
              </li>
            {% endunless %}
          <li class="header-mobile-menu-content-item">
            <a
              class="header-mobile-menu-content-link"
              href="{% route logout %}"
            >
              Logout
            </a>
          </li>
          {% else %}
            <li class="header-mobile-menu-content-item">
              <a
                class="header-mobile-menu-content-link"
                href="{% route login %}"
              >
                Login
              </a>
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>
</header>
<div class="greyed np-hidden"></div>

<style>
  .header-mobile {
    display: none;
    justify-content: space-between;
    height: 64px;
    padding: 16px 5%;
    border-bottom: 1px solid #b6b6b6;
    margin-bottom: 20px;
  }
  .header-mobile-logo {
    height: 32px;
  }
  .header-mobile-icons {
    display: flex;
    justify-content: space-evenly;
    width: 50%;
  }
  .header-mobile-search-icon {
    font-size: 32px;
    cursor: pointer;
  }
  .header-mobile-menu-icon {
    font-size: 32px;
    cursor: pointer;
  }
  .header-mobile-avatar {
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
  }
  .header-mobile-search-bar {
    height: 64px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    background-color: white;
    width: 100%;
  }
  .header-mobile-search-form {
    width: 85%;
    margin: auto;
    border: 1px solid black;
    display: flex;
    border-radius: 5px;
  }
  .header-mobile-search-form-input {
    width: 90%;
    height: 40px;
    border: none;
    outline: none;
    font-size: 20px;
  }
  .header-mobile-search-bar-close {
    font-size: 32px;
    align-self: center;
    right: 20px;
    position: relative;
  }
  .header-mobile-search-bar-button {
    align-self: center;
    padding: 0 10px;
    font-size: 20px;
    background: none;
    border: none;
  }
  .header-mobile-menu-header {
    position: fixed;
    width: 100vw;
    height: 64px;
    top: 0;
    left: 0;
    display: flex;
    z-index: 10;
    background-color: white;
    justify-content: space-between;
    height: 64px;
    padding: 16px 5%;
    border-bottom: 1px solid #b6b6b6;
  }
  .header-mobile-menu-header-close {
    font-size: 32px;
    align-self: center;
    right: 20px;
    position: relative;
  }
  .header-mobile-menu-content {
    position: fixed;
    width: 300px;
    height: calc(100vh - 64px);
    top: 64px;
    right: 0;
    display: block;
    z-index: 10;
    background-color: white;
    overflow-y: auto !important;
    padding-top: 32px;
  }
  .header-mobile-menu-content-section {
    width: 80%;
    margin-left: 8%;
  }
  .header-mobile-menu-content-title {
    font-weight: 500;
    letter-spacing: 3px;
    opacity: 0.4;
    margin-bottom: 16px;
    font-size: 1.2rem;
    cursor: pointer;
  }
  .menu-arrow {
    float: right;
  }
  .header-mobile-menu-content-list {
    list-style: none;
    padding-left: 0;
  }
  .header-mobile-menu-content-item {
    margin: 8px 0;
  }
  .header-mobile-menu-content-link {
    text-decoration: none;
    color: #1E2423;
    font-size: 1.1rem;
  }
  .header-mobile-menu-content-link:hover {
    color: #1E2423;
  }
  .header-mobile-menu-divider {
    width: 84%;
    left: 8%;
    position: relative;
    border-bottom: 1px solid #b6b6b6;
    opacity: 0.6;
  }
  .greyed {
    opacity: 0.5;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #000000;
    z-index: 5;
    display: block;
    content: "";
  }
  @media only screen and (max-width: 350px) {
    .header-mobile-menu-content {
      width: 100vw;
    }
  }
</style>

<script>
  $('[id^="BackToAdminBanner-react-component-"]').remove();
  $(".header-mobile-search-icon").click(function () {
    $(".greyed").removeClass("np-hidden");
    $(".header-mobile-search-bar").removeClass("np-hidden");
    document.body.style.overflow = "hidden";
  });
  $(".header-mobile-search-bar-close").click(function () {
    document.body.style.overflow = "scroll";
    $(".header-mobile-search-bar").addClass("np-hidden");
    $(".greyed").addClass("np-hidden");
  });
  $(".greyed").click(function () {
    document.body.style.overflow = "scroll";
    if(! $(".header-mobile-search-bar").hasClass('np-hidden')){
      $(".header-mobile-search-bar").addClass("np-hidden");
    }
    if(! $(".header-mobile-menu").hasClass('np-hidden')){
      $(".header-mobile-menu").addClass("np-hidden");
    }
    $(".greyed").addClass("np-hidden");
  });
  $(".header-mobile-menu-icon").click(function () {
    $(".header-mobile-menu").removeClass("np-hidden");
    document.body.style.overflow = "hidden";
    $(".greyed").removeClass("np-hidden");
  });
  $(".header-mobile-menu-header-close").click(function () {
    $(".header-mobile-menu").addClass("np-hidden");
    document.body.style.overflow = "scroll";
    $(".greyed").addClass("np-hidden");
  });
  $('.header-mobile-menu-content-title').click(function() {
    $(this).children('.menu-arrow').toggleClass('np-hidden');
    $(this).next().toggleClass('np-hidden');
  })
</script>
