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

<div class="flex min-h-0 flex-1 flex-col animate-fade-in">

    @if(count($breadcrumbs))
        <div class="px-6 pt-4">
            <x-layouts.admin.breadcrumb :items="$breadcrumbs" />
        </div>
    @endif

    @if($title)
    <div class="mb-6 flex flex-col gap-4 px-6 pt-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-foreground">{{ $title }}</h1>
            @if($subtitle)
                <p class="mt-1 text-sm text-muted-foreground">{{ $subtitle }}</p>
            @endif
        </div>
        @if(isset($actions))
            <div class="flex flex-shrink-0 items-center gap-3">
                {{ $actions }}
            </div>
        @endif
    </div>
    @endif

    <div class="flex-1 px-6 pb-6">
        {{ $slot }}
    </div>
</div>