{% load static %}
<header class="h-14 bg-white border-b border-slate-200 flex items-center px-4 gap-4 z-30 sticky top-0">
  <button @click="sidebarOpen = !sidebarOpen"
          class="p-1.5 rounded-lg text-slate-500 hover:bg-slate-100">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>

  <a href="/" class="text-brand-700 font-semibold text-lg shrink-0">Vergabe Teilnahme</a>

  <form hx-get="/suche/" hx-target="#search-results" hx-trigger="input changed delay:300ms"
        class="relative flex-1 max-w-lg mx-auto">
    <input name="q" type="search" placeholder="Ausschreibung, Aufgabe, Dokument suchen..."
           autocomplete="off"
           class="form-input w-full pl-9">
    <svg class="absolute left-2.5 top-2.5 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
    </svg>
    <div id="search-results"
         class="absolute top-full left-0 w-full bg-white rounded-b-lg shadow-lg z-50 hidden [&:not(:empty)]:block">
    </div>
  </form>

  <div x-data="{ open: false }" class="relative ml-auto shrink-0">
    <button @click="open = !open" @click.outside="open = false"
            class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-100 text-sm text-slate-700">
      <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-brand-100 text-brand-700 font-semibold text-xs">
        {{ request.user.first_name|first|default:"?" }}
      </span>
      <span>{{ request.user.get_full_name|default:request.user.username }}</span>
      <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
      </svg>
    </button>

    <div x-show="open" x-cloak
         class="absolute right-0 top-full mt-1 w-48 bg-white border border-slate-200 rounded-lg shadow-lg py-1 z-50">
      <div class="px-3 py-2 text-xs text-slate-500 border-b border-slate-100">
        {{ request.user.get_rolle_display|default:"Mitarbeiter" }}
      </div>
      <a href="/accounts/logout/"
         class="block px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">Abmelden</a>
    </div>
  </div>
</header>