{{-- The title block every index and detail screen opens with. --}}
@props(['title', 'subtitle' => null, 'back' => null, 'backLabel' => null])

<div class="intro-y flex flex-wrap items-end justify-between gap-4 mt-2">
    <div>
        @if ($back)
            <a href="{{ $back }}" wire:navigate
                class="text-sm font-medium text-slate-500 transition hover:text-slate-800">&larr;
                {{ $backLabel ?? __('Back') }}</a>
        @endif

        <h2 class="{{ $back ? 'mt-2' : '' }} text-lg font-medium">{{ $title }}</h2>

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

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