@props(['title' => null, 'subtitle' => null])

<header class="topbar-blur sticky top-0 z-40 flex items-center gap-3 px-5 lg:px-[26px] py-3.5 border-b border-line-soft">
    {{-- mobile nav trigger --}}
    <button type="button" @click="nav = true"
            class="lg:hidden grid place-items-center w-9 h-9 rounded-lg text-ink-2 hover:bg-raised hover:text-ink transition-colors"
            aria-label="{{ __('common.menu') }}">
        <x-icon name="menu" :size="20" />
    </button>

    <div class="min-w-0">
        @if ($title)
            <h1 class="text-[15px] font-bold text-ink leading-tight truncate">{{ $title }}</h1>
        @endif
        @if ($subtitle)
            <p class="text-[12px] text-ink-3 truncate">{{ $subtitle }}</p>
        @endif
    </div>

    <div class="ml-auto flex items-center gap-3">
        <span class="hidden sm:inline-flex items-center gap-1.5 rounded-full bg-raised border border-line-soft px-2.5 py-1 text-[11px] font-semibold text-ink-2">
            <span class="w-[7px] h-[7px] rounded-full bg-accent pulse-live"></span>
            {{ __('common.live') }}
        </span>

        @auth
            <span class="hidden sm:flex items-center gap-2 text-[12px] text-ink-2">
                <span class="grid place-items-center w-7 h-7 rounded-full bg-inset text-ink-2">
                    <x-icon name="user" :size="15" />
                </span>
                <span class="font-mono">{{ auth()->user()->name }}</span>
            </span>

            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                        class="grid place-items-center w-9 h-9 rounded-lg text-ink-2 hover:bg-raised hover:text-ink transition-colors"
                        aria-label="{{ __('common.logout') }}" title="{{ __('common.logout') }}">
                    <x-icon name="logout" :size="18" />
                </button>
            </form>
        @endauth
    </div>
</header>