{{ $currentPage := . }}
{{ $segments := split .RelPermalink "/" }}
{{ $section := index $segments 1 }}
{{ $subsection := index $segments 2 }}

<div class="py-2 px-2 md:px-4">
  <div x-data="{ mobileMenuOpen: false }" class="relative bg-white">
    <div class="max-w-7xl mx-auto">
      <div class="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
        <div class="lg:w-0 lg:flex-1 text-lg lg:text-xl xl:text-2xl">
          <a href="/" class="flex {{ if .IsHome }} hidden{{ end }}">
            Open<span class="text-brand-500">GeoSys</span>
          </a>
        </div>
        <div class="-mr-2 -my-2 md:hidden">
          <button @click="mobileMenuOpen = true" type="button"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
              </path>
            </svg>
          </button>
        </div>
        <nav class="hidden md:flex space-x-10">

          {{ range .Site.Menus.main }}
          {{ $url_trimmed := trim .URL "/" }}
          <a href="{{ .URL }}"
            class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150{{if (eq $section $url_trimmed) }} text-brand-500{{end}}">{{.Name}}</a>
          {{ end }}

        </nav>
        <div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
          <label for="search-input" class="hidden text-sm font-medium leading-5 text-gray-700">Search</label>
          <div class="relative">
            <div class="z-10 absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                  clip-rule="evenodd"></path>
              </svg>
            </div>
            <input id="search-input"
              class="form-input w-full p-1 text-center rounded-md border-2 border-brand-200 sm:text-sm sm:leading-5"
              placeholder="Search this site">
          </div>
        </div>
      </div>
    </div>

    <div x-description="Mobile menu, show/hide based on mobile menu state." x-show="mobileMenuOpen"
      x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95"
      x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in"
      x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
      class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden z-10" style="display: none;">
      <div class="rounded-lg shadow-lg">
        <div class="rounded-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
          <div class="pt-5 pb-6 px-5 space-y-6">
            <div class="flex items-center justify-between border-b">
              <div>
                <a href="/">Open<span class="text-brand-500">GeoSys</span></a>
              </div>
              <div class="-mr-2">
                <button @click="mobileMenuOpen = false" type="button"
                  class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                    </path>
                  </svg>
                </button>
              </div>
            </div>
            <div>
              <nav class="grid gap-y-8">
                {{ range .Site.Menus.main }}
                {{ $url_trimmed := trim .URL "/" }}
                <a href="{{ .URL }}"
                  class="text-base leading-6 font-medium text-gray-900 -m-3 p-3 flex items-center space-x-3 rounded-md hover:bg-gray-50 transition ease-in-out duration-150{{if (eq $section $url_trimmed) }} text-brand-500{{end}}">
                  {{ .Name }}
                </a>
                {{ if eq $section $url_trimmed }}
                {{ $currentMenu := index $.Site.Menus $section }}
                {{ range $currentMenu }}
                {{ $url_trimmed := trim .URL "/" }}
                {{ $url_first_char := substr .URL 0 1 }}
                {{ if eq $url_first_char "/" }}
                <a class="px-4 text-gray-700 text-sm hover:text-gray-900 {{if eq $subsection .Identifier }} text-brand-500{{ end }}"
                  href="{{ .URL }}">
                  {{ .Name }}
                </a>
                {{ end }}
                {{ end }}
                {{ end }}
                {{ end }}
                <label for="search-input-mobile"
                  class="hidden text-sm font-medium leading-5 text-gray-700">Search</label>
                <div class="mt-1 relative rounded-md shadow-sm">
                  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd"
                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                  <input id="search-input-mobile" class="form-input block w-full pl-10 sm:text-sm sm:leading-5"
                    placeholder="Search this site">
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>