@props(['title', 'description' => null, 'breadcrumbs' => []])
{{-- breadcrumbs: ['Label' => url|null, ...] (last item is the current page) --}}
<div {{ $attributes->merge(['class' => 'mb-6']) }}>
    @if ($breadcrumbs)
        <nav aria-label="Breadcrumb" class="mb-2">
            <ol class="flex flex-wrap items-center gap-1 text-xs text-slate-500">
                <li><a href="{{ route('dashboard') }}" wire:navigate class="hover:text-slate-700">Home</a></li>
                @foreach ($breadcrumbs as $label => $url)
                    <li class="flex items-center gap-1">
                        <x-icon name="chevron-right" class="size-3 text-slate-400" />
                        @if ($url && ! $loop->last)
                            <a href="{{ $url }}" wire:navigate class="hover:text-slate-700">{{ $label }}</a>
                        @else
                            <span @if ($loop->last) aria-current="page" class="font-medium text-slate-700" @endif>{{ $label }}</span>
                        @endif
                    </li>
                @endforeach
            </ol>
        </nav>
    @endif

    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div class="min-w-0">
            <h1 class="text-2xl font-semibold tracking-tight text-slate-900">{{ $title }}</h1>
            @if ($description)
                <p class="mt-1 max-w-3xl text-sm text-slate-500">{{ $description }}</p>
            @endif
            {{ $meta ?? '' }}
        </div>
        @isset($actions)
            <div class="flex shrink-0 flex-wrap items-center gap-2">{{ $actions }}</div>
        @endisset
    </div>
</div>