{{ define "layouts/topbar" }}
  {{ $linkstyle := "text-gray-400 hover:text-gray-900 no-underline" }}
  <nav class="space-x-4 mb-4 py-2 border-b border-black">
    <div class="container flex justify-between p-0">
      <div id="left-items">
        <a href="/" hx-boost="true" class="{{ $linkstyle }} flex gap-2">
          <i class="w-6 h-6" data-lucide="tangent"></i>
          tangled.sh
        </a>
      </div>
      <div id="right-items" class="flex gap-2">
        {{ with .LoggedInUser }}
        <a href="/repo/new" hx-boost="true" class="{{ $linkstyle }}">
          <i class="w-6 h-6" data-lucide="plus"></i>
        </a>
        <details class="relative inline-block text-left">
          <summary class="{{ $linkstyle }} cursor-pointer list-none">
            {{ didOrHandle .Did .Handle }}
          </summary>
          <div class="absolute flex flex-col right-0 mt-4 p-2 w-48 bg-white border border-black z-50">
            <a href="/{{ didOrHandle .Did .Handle }}"class="{{ $linkstyle }}">profile</a>
            <a href="/knots"class="{{ $linkstyle }}">knots</a>
            <a href="/settings"class="{{ $linkstyle }}">settings</a>
            <a href="/logout" class="text-red-400 hover:text-red-700 no-underline">logout</a>
          </div>
        </details>
        {{ else }}
        <a href="/login" class="{{ $linkstyle }}">
          login
        </a>
        {{ end }}
      </div>
    </div>
  </nav>
{{ end }}