<!-- Main navigation container -->

{{/* Show site search? */}}
{{ $show_search := site.Params.hugoblox.header.search | default false }}

<nav
  class="relative flex w-full flex-nowrap items-center justify-between bg-white py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-slate-900 lg:flex-wrap lg:justify-start lg:py-4"
  data-te-navbar-ref>
  <div class="flex w-full flex-wrap items-center justify-between px-3">
    <!-- Hamburger button for mobile view -->
    <button
      class="block border-0 bg-transparent px-2 text-[var(--hb-color-header-fg)] hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
      type="button"
      data-te-collapse-init
      data-te-target="#collapse-main-navbar"
      aria-controls="collapse-main-navbar"
      aria-expanded="false"
      aria-label="Toggle navigation" onclick="toggleNavbar('collapse-main-navbar')">
      <!-- Hamburger icon -->
      <span class="[&>svg]:w-7">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-7 w-7">
          <path
            fill-rule="evenodd"
            d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </button>

    <!-- Collapsible navbar container -->
    <div
      class="!visible mt-2 hidden flex-grow basis-[100%] items-center justify-center lg:mt-0 lg:!flex lg:basis-auto"
      id="collapse-main-navbar"
      data-te-collapse-item>
      <!-- Main links -->
      {{- $currentPage := . }}
      <ul
        class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row items-center"
        data-te-navbar-nav-ref>
        {{- range site.Menus.main }}
        {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
        {{- $page_url:= $currentPage.Permalink | absLangURL }}
        {{- $active := eq $menu_item_url $page_url -}}
        {{- $activeClass := cond $active "active" "" -}}
        <!-- Home link [&.active]:text-bold [&.active]:text-black/90 dark:[&.active]:text-neutral-300-->
        <li
          class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
          data-te-nav-item-ref>
          <a
            class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
            [&.active]:font-bold [&.active]:text-primary-500 {{ $activeClass }}"
            aria-current="page"
            href="{{ .URL | relLangURL }}"
            data-te-nav-link-ref
          >{{- .Name -}}</a
          >
        </li>
        {{ end }}
        {{ if $show_search }}
        <li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
          <a
            class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
            [&.active]:font-bold [&.active]:text-primary-500"
            aria-current="page"
            href="#"
            id="search-toggle"
          >{{- i18n "search" -}}</a
          >
        </li>
        {{ end }}
        {{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
        {{ if $show_mode_toggle }}
        <li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
            [&.active]:font-bold [&.active]:text-primary-500">
          <button class="theme-toggle mt-1" accesskey="t" title="">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round" class="block dark:hidden">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
        <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round" class="hidden dark:block">
              <circle cx="12" cy="12" r="5"></circle>
              <line x1="12" y1="1" x2="12" y2="3"></line>
              <line x1="12" y1="21" x2="12" y2="23"></line>
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
              <line x1="1" y1="12" x2="3" y2="12"></line>
              <line x1="21" y1="12" x2="23" y2="12"></line>
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
          </button>
        </li>
        {{ end }}

        {{/* Theme Picker */}}
        {{ if site.Params.hugoblox.header.theme_picker }}
        <li class="lg:px-2">
          <select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--hb-color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
            <option value="">Theme</option>
            {{ range $name, $data := hugo.Data.themes }}
              <option value="{{ $name }}">{{ $name | humanize }}</option>
            {{ end }}
          </select>
          <script>
            (function() {
              const savedTheme = localStorage.getItem('hb-theme-pack');
              if (savedTheme) {
                document.documentElement.setAttribute('data-theme-pack', savedTheme);
                document.addEventListener('DOMContentLoaded', () => {
                  const select = document.querySelector('select[onchange*="data-theme-pack"]');
                  if (select) select.value = savedTheme;
                });
              }
            })();
          </script>
        </li>
        {{ end }}

        {{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
        {{ if .IsTranslated | and $show_translations }}
        <li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
            [&.active]:font-bold [&.active]:text-primary-500">
          {{- partial "components/language-chooser.html" (dict "page" .) -}}
        </li>
        {{ end }}
      </ul>
    </div>
  </div>
</nav>

{{ if $show_search }}
  {{- partial "components/search-modal.html" . -}}
{{ end }}

<script>
  function toggleNavbar(collapseID){
    document.getElementById(collapseID).classList.toggle("hidden");
    document.getElementById(collapseID).classList.toggle("flex");
  }
</script>
