<header class="header-desktop">
  <div class="header-logo">
    <a href="{% route home %}">
      <img
        alt="{{ current_school.name }}"
        class="header-logo-image"
        src="{{ current_school.logo_url }}"
      />
    </a>
  </div>
  <div class="header-content">
    <div class="header-content-dropdown" id="dropdown-1-button">
      <div class="header-content-text">
        Categories <i class="fa-solid fa-angle-down"></i>
      </div>
      <ul class="header-content-menu" id="dropdown-1-menu">
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-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-content-dropdown" id="dropdown-2-button">
      <div class="header-content-text">
        Resources <i class="fa-solid fa-angle-down"></i>
      </div>
      <ul class="header-content-menu" id="dropdown-2-menu">
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="https://www.omnisend.com/blog/"
          >
            Blog
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="https://www.omnisend.com/resources/library/"
          >
            Library
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="https://www.omnisend.com/resources/reports/"
          >
            Reports
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="https://www.omnisend.com/resources/podcast/"
          >
            Podcast
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="https://www.omnisend.com/resources/interviews/"
          >
            Interviews
          </a>
        </li>
        <li class="header-content-menu-element">
          <a
            class="header-content-dropdown-link"
            href="https://support.omnisend.com/en/"
          >
            Knowledge Base
          </a>
        </li>
      </ul>
    </div>
    <a
      class="register-button"
      href="https://app.omnisend.com/registrationv2?utm_source=academy&utm_medium=startfree&utm_campaign=academy"
    >
      Sign up for Omnisend
    </a>
    <a class="header-content-text" href="/app/faq"> FAQ </a>
    <div class="header-content-search">
      <form
        class="header-content-search-form"
        method="get"
        action="{% route search %}"
      >
        <i class="fal fa-search"></i>
        <input
          aria-label="Search"
          class="header-content-search-form-input"
          type="text"
          name="q"
          placeholder="Search"
        />
      </form>
    </div>
    {% if current_person.signed_in? %}
      <div class="header-content-avatar" id="avatar-button">
        <button class="header-content-avatar-button">
          <img
            alt="{{ current_person.name }}"
            class="header-content-avatar-image"
            src="{{ current_person.avatar_url }}"
          />
        </button>
        <ul class="header-content-menu" id="avatar-dropdown">
          <li class="header-content-menu-text">
            {{ current_person.name }}
            </a>
          </li>
          <li class="header-content-menu-text">
            {{ current_person.email }}
          </li>
          {% unless current_school.sso_active? %}
            <li class="header-content-menu-element">
              <a
                class="header-content-dropdown-link"
                href="{% route account %}"
              >
                Profile
              </a>
            </li>
          {% endunless %}
          <li class="header-content-menu-element">
            <a
              class="header-content-dropdown-link"
              href="{% route logout %}"
            >
              Logout
            </a>
          </li>
        </ul>
      </div>
    {% else %}
      <a class="register-button" href="/sign_up" style="margin-left: 20px"> Log in </a>
    {% endif %}
  </div>
</header>

<style>
  .header-desktop {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    padding: 15px 4%;
  }
  .header-desktop > .header-content > * {
    font-size: 1.25rem;
  }
  .header-logo {
    margin: auto 0;
  }
  .header-logo-image {
    height: 50px;
  }
  .header-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .header-content-dropdown {
    position: relative;
  }
  .header-content-text {
    padding: 0 20px;
    color: #1e2423;
    text-decoration: none;
    cursor: pointer;
    align-self: center;
  }
  .header-content-text:hover {
    color: black;
  }
  .header-content-text .fa-angle-down {
    margin-left: 5px;
  }
  .header-content-menu {
    display: none;
    position: absolute;
    padding: 15px;
    background: white;
    z-index: 100;
    border-radius: 10px;
    border: 1px lightgray solid;
    -webkit-box-shadow: 11px 11px 8px -10px #000000;
    box-shadow: 11px 11px 8px -10px #000000;
    list-style: none;
  }
  .header-content-menu-element {
    padding: 5px 25px;
    margin: 2px 0;
  }
  .header-content-menu-text {
    opacity: 0.8;
    padding: 5px 25px;
  }
  .header-content-menu-element:hover {
    background-color: lightgray;
  }
  .header-content-dropdown-link {
    text-decoration: none;
    color: #1e2423;
    white-space: nowrap;
  }
  .header-content-dropdown-link:hover {
    color: black;
  }
  .header-content-search {
    align-self: center;
    margin-left: 10px;
  }
  .header-content-search-form {
    border: 1px solid #1e2423;
    border-radius: 10px;
    padding: 8px 16px;
  }
  .header-content-search-form-input {
    border: none;
    outline: none;
    padding: 0 10px;
  }
  .header-content-avatar {
    margin-left: 15px;
  }
  .header-content-avatar-button {
    border: none;
    background: none;
  }
  .header-content-avatar-image {
    border-radius: 50%;
    height: 50px;
  }
  #avatar-dropdown {
    right: 0;
  }
  .register-button {
    background-color: #1E2423;
    color: white;
    padding: 11px 16px;
    text-decoration: none;
    border-radius: 10px;
  }
  .register-button:hover {
    color: white;
    background-color: black;
  }
  @media only screen and (min-width: 1800px) {
    .header-desktop {
      padding: 20px 10%;
    }
  }
  @media only screen and (max-width: 1300px) {
    .header-content-text {
      padding: 0 10px;
    }
  }
  @media only screen and (max-width: 1150px) {
    .header-content-search-form-input {
      max-width: 160px;
    }
  }
  @media only screen and (max-width: 1000px) {
    .header-logo-image {
      height: 40px;
    }
    .header-content-avatar-image {
      height: 40px;
    }
    .header-content-search-form-input {
      max-width: 120px;
    }
  }
</style>

<script>
  $("#dropdown-1-button").hover(
    function () {
      $("#dropdown-1-menu").show();
    },
    function () {
      $("#dropdown-1-menu").hide();
    }
  );
  $("#dropdown-2-button").hover(
    function () {
      $("#dropdown-2-menu").show();
    },
    function () {
      $("#dropdown-2-menu").hide();
    }
  );
  $("#avatar-button").hover(
    function () {
      $("#avatar-dropdown").show();
    },
    function () {
      $("#avatar-dropdown").hide();
    }
  );
</script>
