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

<div {{ $attributes->merge(['class' => '']) }}>
    @if (! empty($breadcrumbs))
        <nav class="mb-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-gray-500" aria-label="Breadcrumb">
            @foreach ($breadcrumbs as $i => $crumb)
                @if ($i > 0)
                    <span class="text-gray-300" aria-hidden="true">/</span>
                @endif
                @if (! empty($crumb['url']) && ! ($loop->last))
                    <a href="{{ $crumb['url'] }}" class="hover:text-brand-800">{{ $crumb['label'] }}</a>
                @else
                    <span class="{{ $loop->last ? 'font-medium text-gray-700' : '' }}">{{ $crumb['label'] }}</span>
                @endif
            @endforeach
        </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-gray-900 sm:text-3xl">{{ $title }}</h1>
            @if ($subtitle)
                <p class="mt-1 text-sm text-gray-600 sm:text-base">{{ $subtitle }}</p>
            @endif
        </div>
        @isset($actions)
            <div class="flex shrink-0 flex-wrap items-center gap-2 sm:justify-end">
                {{ $actions }}
            </div>
        @endisset
    </div>
</div>