@props(['title', 'subtitle' => null, 'icon' => null, 'back' => null, 'backLabel' => 'Back'])

<div {{ $attributes->merge(['class' => 'mb-6']) }}>
    @if ($back)
        <a href="{{ $back }}" class="mb-3 inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 hover:text-slate-700">
            <x-icon name="arrow-left" size="sm" />
            {{ $backLabel }}
        </a>
    @endif

    <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="flex min-w-0 items-start gap-3">
            @if ($icon)
                <span class="mt-0.5 rounded-lg bg-brand-50 p-2 text-brand-700">
                    <x-icon :name="$icon" size="lg" />
                </span>
            @endif

            <div class="min-w-0">
                <h1 class="truncate text-xl font-semibold tracking-tight text-slate-900 sm:text-2xl">{{ $title }}</h1>

                @if ($subtitle)
                    <p class="mt-1 text-sm text-slate-500">{{ $subtitle }}</p>
                @endif

                @isset($meta)
                    <div class="mt-2 flex flex-wrap items-center gap-2">{{ $meta }}</div>
                @endisset
            </div>
        </div>

        @isset($actions)
            <div class="flex flex-wrap items-center gap-2">{{ $actions }}</div>
        @endisset
    </div>

    @isset($tabs)
        <div class="mt-5 border-b border-slate-200">
            <nav class="-mb-px flex gap-1 overflow-x-auto">{{ $tabs }}</nav>
        </div>
    @endisset
</div>