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

<div class="no-print mb-5 flex flex-wrap items-start justify-between gap-3">
    <div class="min-w-0">
        @if ($back)
            <a href="{{ $back }}" wire:navigate
               class="mb-1 inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-brand">
                <x-ui.icon name="chevron-right" class="h-3 w-3 rotate-180" />
                Back
            </a>
        @endif

        <h1 class="truncate text-xl font-semibold text-slate-900 dark:text-white">{{ $title }}</h1>

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

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