@props(['crumbs' => []])
{{--
    The bar the content scrolls under. Translucent with a blur rather than a
    solid strip: on a light ground a solid bar reads as chrome bolted on top,
    and the blur is the one borrowed detail worth keeping.
--}}
<header class="sticky top-0 z-30 flex h-[3.75rem] shrink-0 items-center gap-3 border-b border-line bg-[color-mix(in_srgb,var(--surface)_82%,transparent)] px-4 backdrop-blur-lg backdrop-saturate-150 lg:px-6">
    <button type="button" class="lg:hidden inline-flex min-h-11 min-w-11 items-center justify-center rounded text-muted hover:bg-surface-hover"
            @click="nav = true" aria-label="{{ __('dashboard.open_nav') }}">
        <x-ui.icon name="menu" />
    </button>

    {{-- On a phone only the leaf survives: the trail is a desktop affordance,
         and the intermediate crumbs push the page name off screen. --}}
    <nav class="flex min-w-0 items-center gap-2 text-sm text-muted" aria-label="Breadcrumb">
        @foreach ($crumbs as $i => $crumb)
            @if ($i > 0)
                <x-ui.icon name="chevron-down" class="size-3.5 -rotate-90 text-faint {{ $loop->last ? 'hidden sm:block' : 'hidden sm:block' }}" />
            @endif
            <span @class([
                'min-w-0 truncate',
                'font-semibold text-ink' => $loop->last,
                'hidden sm:inline' => ! $loop->last,
            ])>{{ $crumb }}</span>
        @endforeach
    </nav>

    <div class="flex-1"></div>
    {{ $slot }}
</header>