{{ define "layouts/topbar" }}
    <nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
        <div class="container flex justify-between p-0">
            <div id="left-items">
                <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
                  tangled<sub>alpha</sub>
                </a>
            </div>
            <div class="hidden md:flex gap-4 items-center">
              <a href="https://chat.tangled.sh" class="inline-flex gap-1 items-center">
                {{ i "message-circle" "size-4" }} discord
              </a>

              <a href="https://web.libera.chat/#tangled" class="inline-flex gap-1 items-center">
                {{ i "hash" "size-4" }} irc
              </a>

              <a href="https://tangled.sh/@tangled.sh/core" class="inline-flex gap-1 items-center">
                {{ i "code" "size-4" }} source
              </a>
            </div>
            <div id="right-items" class="flex gap-2">
                {{ with .LoggedInUser }}
                    <a href="/repo/new" hx-boost="true">
                      {{ i "plus" "w-6 h-6" }}
                    </a>
                    {{ block "dropDown" . }} {{ end }}
                {{ else }}
                    <a href="/login">login</a>
                {{ end }}
            </div>
        </div>
    </nav>
{{ end }}

{{ define "dropDown" }}
<details class="relative inline-block text-left">
    <summary
        class="cursor-pointer list-none"
    >
        {{ didOrHandle .Did .Handle }}
    </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="/{{ didOrHandle .Did .Handle }}">profile</a>
        <a href="/knots">knots</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>
{{ end }}