{{ $currentPage := . }}

<nav class="px-2 sm:px-4 bg-brand-blue w-screen fixed top-0 z-10">
  <div class="container flex justify-between lg:justify-center lg:justify-between items-center mx-auto max-w-[100vw]">
    <a class="flex flex-start justify-start items-center h-20 lg:h-22 w-[18rem] max-w-[16vw] min-w-[12rem]" href="/">
      <img src="/assets/images/logo-primary.png" alt="Logo" class="y-2" width="150px" height="45px">
    </a>

    <button id="nav-button" type="button"
      class="inline-flex items-center p-2 ml-3 text-sm rounded-lg lg:hidden hover:bg-brand-blue focus:outline-none focus:ring-2 focus:ring-gray-200 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
      aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd"
          d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
          clip-rule="evenodd"></path>
      </svg>
    </button>

    <!-- Desktop Navigation -->
    <div class="hidden w-full h-screen lg:h-auto lg:block lg:w-auto" id="nav-bar">
      <ul id="nav-list"
        class="flex flex-col gap-0 lg:items-center lg:justify-between pl-0 list-none mt-4 lg:flex-row lg:space-x-8 lg:mt-0 lg:text-sm lg:font-medium">

        {{ range .Site.Menus.main.ByWeight }}

        {{ if .HasChildren}}
        <li class="hidden lg:block dropdown py-1 lg:!px-0 lg:!mx-[1rem] hover:border-b-amber-400 hover:border-b-2 ">
          <a href="{{ .URL }}"
            class='flex items-center text-sm py-2 no-underline lg:p-0 text-pale-blue {{ if or (eq .Name "Getting Started") (eq .Name "Resources") }}pointer-events-none{{ end }}'>
            {{ with .Page }}
            {{ .Params.display }}
            {{ else }}
            {{ .Name }}
            {{ end }} <span id="nav-dropdown-icon" class="text-xs pl-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                <g fill="currentColor">
                  <g>
                    <path
                      d="M20.65 7.4c-.3-.3-.75-.3-1.05 0L12 15 4.4 7.4c-.3-.3-.75-.3-1.05 0s-.3.75 0 1.05L12 17.1l8.65-8.65c.3-.25.3-.75 0-1.05z"
                      fill-rule="evenodd"></path>
                  </g>
                </g>
              </svg>
            </span>
          </a>
          <ul class="dropdown-content relative top-6 !mt-0">
            <div class="py-2 opacity-0"></div>
            {{ range .Children }}
            <li class="bg-white {{ if .Page.Params.srOnly}}sr-only lg:!absolute{{ end }}">
              <a href="{{ .URL }}"
                class='nav-dropdown text-sm block no-underline p-4 text-pale-blue {{ if $currentPage.IsMenuCurrent "main" . }}font-semibold text-white{{ end }}'>
                {{ with .Page }}
                {{ .Params.display }}
                {{ else }}
                {{ .Name }}
                {{ end }}</a>
            </li>
            {{ end }}
          </ul>
        </li>

        {{ else }}

        <li class="!mx-[0.43rem] list-none  hover:border-b-amber-400 hover:border-b-2">
          <a href="{{ .URL }}"
            class='text-xl lg:text-sm block py-2 no-underline text-pale-blue lg:p-0 {{ if $currentPage.IsMenuCurrent "main" . }}font-semibold text-white{{ end }}'>
            {{ with .Page }}
            {{ .Params.display }}
            {{ else }}
            {{ .Name }}
            {{ end }}</a>
        </li>
        {{ end }}

        {{ end }}
        <li class="!mx-[0.43rem] list-none  hover:border-b-amber-400 hover:border-b-2">
          <a href="#"
            class='text-xl lg:text-sm block py-2 no-underline text-pale-blue lg:p-0'>On-Campus Programs</a>
        </li>
        {{ if ne .Page.Params.slug "apply-now" }}
        <li class="hidden lg:block lg:!ml-2 lg:pr-4">
          <a href="/apply-now/"
            class="nav-request-info-btn no-underline cursor-pointer mx-auto lg:mx-0 w-44 rounded-md flex justify-center secondary-button bg-pale-blue text-[#252523] m-2 flex-row items-center py-2">
            APPLY NOW
          </a>
        </li>
        {{ end }}

      </ul>
    </div>

    <!-- Mobile Navigation -->
    <div
      class="w-[80vw] md:w-[60vw] fixed flex flex-col top-0 h-screen lg:h-auto lg:w-auto lg:hidden bg-brand-blue drop-shadow-2xl pt-24 pb-8 px-10 fade-out z-10"
      id="nav-bar-mobile">
      <span id="nav-close" class="absolute top-0 right-2 p-4 cursor-pointer text-white text-3xl">&#10005;</span>
      <div
        class="flex flex-col gap-2 lg:items-center lg:justify-between pl-0 lg:pl-3 list-none mt-4 lg:flex-row lg:space-x-8 lg:mt-0 lg:text-sm lg:font-medium overflow-none !text-pale-blue">

        {{ range .Site.Menus.main.ByWeight }}

        {{ if .HasChildren}}
        <dxp-accordion class="block lg:hidden py-4">
          <dxp-collapsible>
            <span slot="heading" class="text-xl">
              {{ with .Page }}
              <a class='flex items-center text-white no-underline {{ if or (eq .Name "Getting Started") (eq .Name "Resources") }}pointer-events-none{{ end }}'
                href="{{.Permalink}}">{{ .Params.display }}</a>
              {{ else }}
              {{ .Name }}
              {{ end }}
            </span>
            {{ range .Children }}
            <a href="{{ .URL }}"
              class='text-md block py-2 lg:py-8 relative md:left-0 pl-3 no-underline text-pale-blue {{ if $currentPage.IsMenuCurrent "main" . }}font-semibold !text-white{{ end }} lg:p-0'>
              {{ with .Page }}
              {{ .Params.display }}
              {{ else }}
              {{ .Name }}
              {{ end }}
            </a>
            {{ end }}
          </dxp-collapsible>
        </dxp-accordion>

        {{ else }}

        <a href="{{ .URL }}"
          class='text-xl lg:text-lg  block py-[1.157rem] pr-4 no-underline text-pale-blue lg:p-0 {{ if $currentPage.IsMenuCurrent "main" . }}font-semibold !text-white{{ end }}'>
          {{ with .Page }}
          {{ .Params.display }}
          {{ else }}
          {{ .Name }}
          {{ end }}</a>
        {{ end }}
        {{ end }}

        <a href="#"
          class='text-xl lg:text-lg  block py-[1.157rem] pr-4 no-underline text-pale-blue lg:p-0'>On-Campus
          Programs</a>

      </div>
      {{ if ne .Page.Params.slug "apply-now" }}
      <a href="/apply-now/"
        class="nav-request-info-btn no-underline cursor-pointer mx-auto lg:mx-0 min-w-[13.5rem] rounded-md flex justify-center secondary-button bg-pale-blue text-[#252523] m-2 mt-12 flex-row items-center py-2">
        APPLY NOW
      </a>
      {{ end }}
    </div>


  </div>
</nav>
<script>
  const navBarMobile = document.getElementById('nav-bar-mobile')
  const requestInfoBtn = document.querySelector('.nav-request-info-btn')
  const close = document.getElementById('nav-close')
  document.getElementById('nav-button').addEventListener('click', () => {
    navBarMobile.classList.toggle('fade-in')
    navBarMobile.classList.toggle('fade-out')
  })
  close.addEventListener('click', () => {
    navBarMobile.classList.toggle('fade-in')
    navBarMobile.classList.toggle('fade-out')
  })
  requestInfoBtn.addEventListener('click', () => {
    navBarMobile.classList.toggle('fade-in')
    navBarMobile.classList.toggle('fade-out')
  })
</script>