{{ define "layouts/topbar" }}
  <nav
    class="space-x-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
    <div class="flex justify-between p-0 items-center">
      <div id="left-items">
        <a href="/" hx-boost="true" class="flex gap-2 font-bold italic">
          tangled
          <sub>alpha</sub>
        </a>
      </div>

      <div id="right-items" class="flex items-center gap-2">
        {{ with .LoggedInUser }}
          {{ block "newButton" . }}{{ end }}
          {{ block "dropDown" . }}{{ end }}
        {{ else }}
          <a href="/login">login</a>
          <span class="text-gray-500 dark:text-gray-400">or</span>
          <a
            href="/signup"
            class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
            join now
            {{ i "arrow-right" "size-4" }}
          </a>
        {{ end }}
      </div>
    </div>
  </nav>
{{ end }}

{{ define "newButton" }}
  <details class="relative inline-block text-left nav-dropdown">
    <summary
      class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
      {{ i "plus" "w-4 h-4" }} new
    </summary>
    <div
      class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700">
      <a href="/repo/new" class="flex items-center gap-2">
        {{ i "book-plus" "w-4 h-4" }}
        new repository
      </a>
      <a href="/strings/new" class="flex items-center gap-2">
        {{ i "line-squiggle" "w-4 h-4" }}
        new string
      </a>
    </div>
  </details>
{{ end }}

{{ define "dropDown" }}
  <details class="relative inline-block text-left nav-dropdown">
    <summary class="cursor-pointer list-none flex items-center">
      {{ $user := didOrHandle .Did .Handle }}
      {{ template "user/fragments/picHandle" $user }}
    </summary>
    <div
      class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700">
      <a href="/{{ $user }}">profile</a>
      <a href="/{{ $user }}?tab=repos">repositories</a>
      <a href="/strings/{{ $user }}">strings</a>
      <a href="/knots">knots</a>
      <a href="/spindles">spindles</a>
      <a href="/settings">settings</a>
      <a
        href="#"
        hx-post="/logout"
        hx-swap="none"
        class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
        logout
      </a>
    </div>
  </details>

  <script>
    document.addEventListener("click", function (event) {
      const dropdowns = document.querySelectorAll(".nav-dropdown");
      dropdowns.forEach(function (dropdown) {
        if (!dropdown.contains(event.target)) {
          dropdown.removeAttribute("open");
        }
      });
    });
  </script>
{{ end }}