{{ define "layouts/fragments/topbar" }}
    <nav class="mx-auto space-x-4 px-6 py-2">
        <div class="flex justify-between p-0 items-center">
            <div id="left-items">
              <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">
                <span class="hidden sm:inline-flex">{{ template "fragments/logotypeSmall" }}</span>
                <span class="inline-flex sm:hidden">{{ template "fragments/dolly/logo" (dict "Classes" "size-8" ) }}</span>
              </a>
            </div>

            <div id="right-items" class="flex items-center gap-4">
                {{ with .LoggedInUser }}
                    <div class="flex items-center order-1 md:order-3">{{ block "newButton" . }} {{ end }}</div>
                    <div class="flex items-center order-2 md:order-4">{{ template "notifications/fragments/bell" }}</div>
                    <div class="flex items-center order-3 md:order-1">{{ block "search" . }} {{ end }}</div>
                    <div class="hidden md:block md:order-2 w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
                    <div class="flex items-center order-4 md:order-5">{{ block "profileDropdown" . }} {{ end }}</div>
                {{ 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 py-0 cursor-pointer list-none flex items-center gap-2">
      {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">New</span>
    </summary>
    <div class="absolute flex flex-col right-0 mt-3 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 "search" }}
<div class="relative hidden md:block" id="topbar-search-container">
  <div id="topbar-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] md:w-80 lg:w-96 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
    {{ i "search" "size-4 text-gray-400" }}
    <input
      type="text"
      id="topbar-search-input"
      name="q"
      placeholder="Search..."
      autocomplete="off"
      class="flex-1 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-sm text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
      hx-get="/search/quick"
      hx-trigger="input changed delay:10ms"
      hx-target="#topbar-search-results"
      hx-swap="innerHTML"
      hx-indicator="#topbar-search-indicator"
    />
    <kbd id="search-kbd" class="pointer-events-none flex items-center text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden"></kbd>
    <script>
      (function() {
        var kbd = document.getElementById('search-kbd');
        if (!kbd) return;
        var ua = navigator.userAgent;
        var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(ua);
        if (isMobile) {
          kbd.style.display = 'none';
        } else if (/Macintosh|Mac OS X/.test(ua)) {
          kbd.textContent = '⌘K';
        } else {
          kbd.textContent = 'Ctrl+K';
        }
      })();
    </script>
    <span id="topbar-search-indicator" class="shrink-0">
      {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
    </span>
    <button
      type="button"
      class="hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
      onclick="const i=document.getElementById('topbar-search-input');i.value='';htmx.trigger(i,'input');i.focus()"
    >{{ i "x" "size-4" }}</button>
  </div>
  <div id="topbar-search-results" class="absolute w-full z-50"></div>
</div>

<button id="mobile-search-btn" class="md:hidden" type="button" data-action="open-mobile-search">
  {{ i "search" "size-5 text-gray-500 dark:text-gray-400" }}
</button>

<div id="mobile-search-overlay"
     class="md:hidden fixed inset-x-0 top-0 h-dvh z-50
            bg-white dark:bg-gray-900
            flex flex-col
            opacity-0 pointer-events-none
            transition-opacity duration-150
            pt-[env(safe-area-inset-top)]"
     aria-hidden="true">
  <div class="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
    {{ i "search" "size-4 text-gray-400 shrink-0" }}
    <input
      type="text"
      id="mobile-search-input"
      name="q"
      placeholder="Search..."
      autocomplete="off"
      inputmode="search"
      class="flex-1 min-w-0 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-[16px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
      hx-get="/search/quick/mobile"
      hx-trigger="input changed delay:10ms"
      hx-target="#mobile-search-results"
      hx-swap="innerHTML"
      hx-indicator="#mobile-search-indicator"
    />
    <span id="mobile-search-indicator" class="shrink-0">
      {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
    </span>
    <button type="button" class="p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
      {{ i "x" "size-5 text-gray-400" }}
    </button>
  </div>
  <div id="mobile-search-results" class="flex-1 flex flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]"></div>
  <div id="mobile-search-spacer" class="bg-gray-50 dark:bg-gray-800 hidden"></div>
</div>
<style>
  #topbar-search-indicator,
  #mobile-search-indicator {
    display: none;
    opacity: 0;
    transition-property: opacity, display;
    transition-duration: 150ms, 150ms;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }
  #topbar-search-indicator.htmx-request,
  #mobile-search-indicator.htmx-request {
    display: block;
    opacity: 1;
    transition-duration: 0s, 0s;
  }
</style>
{{ end }}

{{ define "profileDropdown" }}
{{ $handle := resolve .Did }}
<details class="relative inline-block text-left nav-dropdown">
    <summary class="cursor-pointer list-none flex items-center gap-1">
        {{ template "user/fragments/pic" (list .Did "size-8 md:size-6") }}
        <span class="hidden md:inline">{{ $handle | truncateAt30 }}</span>
    </summary>
    <div class="absolute right-0 mt-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg z-50 text-sm" style="width: 14rem;">
        {{ $linkStyle := "flex items-center gap-3 px-4 py-2 hover:no-underline hover:bg-gray-50 hover:dark:bg-gray-700/50" }}

        {{ $others := .Accounts | otherAccounts .Did }}
        {{ if $others }}
          <div class="text-sm text-gray-500 dark:text-gray-400 px-3 py-1 pt-2">Switch account</div>
          {{ range $others }}
            <button
                type="button"
                hx-post="/account/switch"
                hx-vals='{"did": "{{ .Did }}"}'
                hx-swap="none"
                class="{{$linkStyle}} w-full text-left pl-3"
            >
                {{ template "user/fragments/pic" (list .Did "size-6") }}
                <span class="truncate flex-1">{{ .Did | resolve }}</span>
            </button>
          {{ end }}
        {{ end }}

        <a href="/login?mode=add_account" class="{{$linkStyle}} pl-3">
          <div class="size-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
            {{ i "plus" "size-3" }}
          </div>

          <div class="text-left flex-1 min-w-0 block truncate">
            Add account
          </div>
        </a>

        <div class="border-t border-gray-200 dark:border-gray-700">
            <a href="/{{ $handle }}" class="{{$linkStyle}}">
              {{ i "user" "size-4" }}
              Profile
            </a>
            <a href="/{{ $handle }}?tab=repos" class="{{$linkStyle}}">
              {{ i "book-marked" "size-4" }}
              Repositories
            </a>
            <a href="/{{ $handle }}?tab=strings" class="{{$linkStyle}}">
              {{ i "line-squiggle" "size-4" }}
              Strings
            </a>
            <a href="/settings" class="{{$linkStyle}}">
              {{ i "cog" "size-4" }}
              Settings
            </a>
            <a href="#"
               hx-post="/logout"
               hx-swap="none"
               class="{{$linkStyle}} text-red-400 hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-700/20 pb-2">
              {{ i "log-out" "size-4" }}
              Logout
            </a>
        </div>
    </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 }}