{{define "navbar"}}

<nav class="navbar bg-base-100/80 backdrop-blur-md border-b border-white/5 sticky top-0 z-50 px-4">

  <div class="navbar-start">

    <a href="/" class="btn btn-ghost gap-2">

      {{template "icon-logo"}}

      <span class="font-bold text-lg hidden sm:inline">SkyDeck</span>

    </a>

  </div>

  <div class="navbar-end gap-2">

    {{with CurrentUser}}

    <a href="/decks" class="btn btn-ghost btn-sm">

      <span class="hidden sm:inline">My Decks</span>

      <span class="sm:hidden">Decks</span>

    </a>

    <button class="btn btn-primary btn-sm" onclick="document.getElementById('new-deck-modal').showModal()">

      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />

      </svg>

      <span class="hidden sm:inline">New Deck</span>

    </button>

    {{end}}

    {{template "user-menu"}}

  </div>

</nav>

{{template "new-deck-modal"}}

{{end}}