@props(['titulo', 'grupo' => null, 'descricao' => null])

{{-- Cabeçalho comum a todas as telas: de onde a tela é (o grupo do menu), o
     título, uma linha dizendo o que ela mostra e, à direita, os filtros. --}}
<div>
    <header class="flex flex-wrap items-end justify-between gap-x-6 gap-y-4 border-b border-fio pb-5">
        <div class="min-w-0">
            @if ($grupo)
                <p class="text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-marca-600">{{ $grupo }}</p>
            @endif
            <h1 class="mt-0.5 text-2xl font-semibold tracking-tight text-balance text-tinta">{{ $titulo }}</h1>
            @if ($descricao)
                <p class="mt-1 max-w-[70ch] text-sm text-suave">{{ $descricao }}</p>
            @endif
        </div>

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

    <div wire:loading.delay.class="opacity-60" class="mt-6 transition-opacity">
        {{ $slot }}
    </div>
</div>