{{define "navigation"}}
{{$currentPath := .CurrentPath}}
{{$isCollapsed := .IsCollapsed}}
{{$navItems := dict 
  "home" (dict "href" "/" "label" "Home")
  "browse" (dict "href" "/browse" "label" "Browse")
  "discover" (dict "href" "/discover" "label" "Discover")
  "watchlist" (dict "href" "/watchlist" "label" "Watchlist")
}}

<nav class="bg-background-sidebar h-full border-r border-border">
  <div class="flex flex-col">
    <button type="button" class="group relative flex w-full items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover" data-command-palette-open {{if $isCollapsed}}title="Search"{{end}}>
      <svg class="size-6 shrink-0 text-foreground-muted transition-colors duration-200 group-hover:text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.35-4.35" />
      </svg>
      <div class="nav-label-container ml-4 grid min-w-0 flex-1 grid-cols-[1fr] opacity-100">
        <div class="flex min-w-0 items-center justify-between gap-3 overflow-hidden">
          <span class="whitespace-nowrap text-sm font-medium text-foreground-muted transition-colors duration-200 group-hover:text-foreground">Search</span>
          <kbd class="hidden whitespace-nowrap border border-border bg-background-surface px-1.5 py-0.5 text-[0.65rem] font-medium text-foreground-muted lg:inline" data-command-palette-shortcut>⌘P</kbd>
        </div>
      </div>
    </button>

    <div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-command-palette-dialog aria-hidden="true">
      <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border" data-command-palette-root role="dialog" aria-modal="true" aria-label="Command palette">
        <label for="command-palette-input" class="sr-only">Search commands and anime</label>
        <div class="flex items-center border-b border-border">
          <svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
          </svg>
          <input
            id="command-palette-input"
            name="q"
            type="search"
            autocomplete="off"
            placeholder="Search or jump to..."
            class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none"
          />
          <button type="button" class="mr-3 px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground" data-command-palette-close>Esc</button>
        </div>
        <div data-command-palette-results class="max-h-[min(70vh,34rem)] overflow-y-auto py-2"></div>
      </div>
    </div>

    {{/* Home */}}
    {{$isActive := eq $currentPath "/"}}
    <a href="/" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Home"{{end}}>
      {{if $isActive}}
        <div class="bg-accent absolute top-1/2 left-0 h-12 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
      {{end}}
      <svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
        <polyline points="9 22 9 12 15 12 15 22" />
      </svg>
      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
        <div class="overflow-hidden min-w-0">
          <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Home</span>
        </div>
      </div>
    </a>

    {{/* Browse */}}
    {{$isActive := eq $currentPath "/browse"}}
    <a href="/browse" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Browse"{{end}}>
      {{if $isActive}}
        <div class="bg-accent absolute top-1/2 left-0 h-12 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
      {{end}}
      <svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect x="2" y="2" width="20" height="20" rx="0" ry="0" />
        <line x1="7" y1="2" x2="7" y2="22" />
        <line x1="17" y1="2" x2="17" y2="22" />
        <line x1="2" y1="12" x2="22" y2="12" />
        <line x1="2" y1="7" x2="7" y2="7" />
        <line x1="2" y1="17" x2="7" y2="17" />
        <line x1="17" y1="17" x2="22" y2="17" />
        <line x1="17" y1="7" x2="22" y2="7" />
      </svg>
      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
        <div class="overflow-hidden min-w-0">
          <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Browse</span>
        </div>
      </div>
    </a>

    {{/* Discover */}}
    {{$isActive := eq $currentPath "/discover"}}
    <a href="/discover" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Discover"{{end}}>
      {{if $isActive}}
        <div class="bg-accent absolute top-1/2 left-0 h-12 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
      {{end}}
      <svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10" />
        <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
      </svg>
      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
        <div class="overflow-hidden min-w-0">
          <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Discover</span>
        </div>
      </div>
    </a>

    {{/* Watchlist */}}
    {{$isActive := eq $currentPath "/watchlist"}}
    <a href="/watchlist" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Watchlist"{{end}}>
      {{if $isActive}}
        <div class="bg-accent absolute top-1/2 left-0 h-12 w-0.5 -translate-y-1/2 rounded-r-sm shadow-[0_0_8px_var(--color-accent)]"></div>
      {{end}}
      <svg class="size-6 shrink-0 transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17 18.113l-3.256-2.326A2.989 2.989 0 0 0 12 15.228c-.629 0-1.232.194-1.744.559L7 18.113V4h10v14.113zM18 2H6a1 1 0 0 0-1 1v17.056c0 .209.065.412.187.581a.994.994 0 0 0 1.394.233l4.838-3.455a1 1 0 0 1 1.162 0l4.838 3.455A1 1 0 0 0 19 20.056V3a1 1 0 0 0-1-1z" />
      </svg>
      <div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
        <div class="overflow-hidden min-w-0">
          <span class="whitespace-nowrap text-sm font-medium transition-colors duration-200 {{if $isActive}}text-accent{{else}}text-foreground-muted group-hover:text-foreground{{end}}">Watchlist</span>
        </div>
      </div>
    </a>
  </div>
</nav>
{{end}}