@props(['titulo', 'descricao' => null, 'fechar' => 'fechar', 'largura' => 'max-w-lg'])

{{-- Janela sobre a tela, para formulário curto de cadastro.

     O estado fica no Livewire (a tela decide quando mostrar), e o Alpine cuida
     só do teclado e do clique fora. `x-trap` prende o foco dentro da janela e
     trava a rolagem do fundo — sem isso, o Tab passeia pela página atrás e a
     página rola junto no celular. --}}
<div class="fixed inset-0 z-50 flex items-end justify-center overflow-y-auto bg-marca-900/50 p-0 sm:items-center sm:p-6"
     x-data
     x-on:keydown.escape.window="$wire.{{ $fechar }}()"
     x-on:click.self="$wire.{{ $fechar }}()"
     role="dialog" aria-modal="true" aria-labelledby="titulo-modal">
    <div x-trap.noscroll="true" {{ $attributes->class(['w-full rounded-t-xl border border-fio bg-superficie shadow-xl sm:rounded-xl', $largura]) }}>
        <header class="flex items-start justify-between gap-4 border-b border-fio px-5 py-4">
            <div class="min-w-0">
                <h2 id="titulo-modal" class="font-display text-base font-semibold tracking-tight text-tinta">{{ $titulo }}</h2>
                @if ($descricao)
                    <p class="mt-0.5 text-sm text-suave">{{ $descricao }}</p>
                @endif
            </div>
            <button type="button" wire:click="{{ $fechar }}" aria-label="Fechar"
                    class="-mr-1.5 shrink-0 rounded-md p-1.5 text-suave transition-colors hover:bg-chao hover:text-tinta">
                <svg class="size-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" d="M6 18 18 6M6 6l12 12"/>
                </svg>
            </button>
        </header>

        {{ $slot }}
    </div>
</div>