@props(['title' => 'Übersicht'])
<header class="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-line bg-base/90 px-4 backdrop-blur sm:px-6 lg:px-8">
    <button type="button" @click="nav = true"
            class="grid min-h-11 min-w-11 shrink-0 place-items-center rounded-md text-ink-2 hover:bg-raised hover:text-ink lg:hidden"
            aria-label="Menü öffnen">
        <x-icon name="menu" class="h-5 w-5" />
    </button>

    <h1 class="min-w-0 truncate font-display text-sm font-semibold text-ink sm:text-base">{{ $title }}</h1>

    <div class="ml-auto flex min-w-0 items-center gap-2">
        @php
            $fleetTotal = \App\Models\Server::count();
            $fleetOnline = \App\Models\Server::where('status', 'online')->count();
        @endphp
        <x-status-pill :status="$fleetOnline > 0 ? 'online' : 'offline'">{{ $fleetOnline }} / {{ $fleetTotal }} online</x-status-pill>
    </div>
</header>