@props(['title', 'description' => null, 'helpKey' => null])
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
    <div><nav aria-label="Navegação estrutural" class="mb-1 text-xs font-bold uppercase tracking-[0.12em] text-zinc-500"><a href="{{ route('dashboard') }}" wire:navigate class="hover:text-zinc-950">Início</a><span aria-hidden="true" class="px-1.5">/</span><span aria-current="page" class="text-brand-600">{{ $title }}</span></nav><div class="flex items-start gap-3"><h1 class="text-2xl font-black tracking-tight text-zinc-950 sm:text-3xl">{{ $title }}</h1><x-ui.contextual-help :help-key="$helpKey" /></div>@if($description)<p class="mt-1.5 max-w-2xl text-sm text-zinc-600">{{ $description }}</p>@endif</div>
    @isset($actions)<div class="flex flex-wrap gap-2">{{ $actions }}</div>@endisset
</div>