{{-- Native <dialog> modal — hidden by the browser until showModal(), so it can
     never "leak open" if CSS/JS is stale. Opened by a [data-modal="id"] trigger;
     closed by [data-modal-close], Esc, or backdrop click (admin.js). --}}
@props(['id', 'title', 'icon' => 'fa-light fa-pen-to-square', 'eyebrow' => 'Amendment'])

{{-- wire:ignore.self keeps the native dialog's open/modal state across Livewire
     re-renders (morphdom would otherwise drop the `open` attribute); the form
     inside still morphs, so inline validation updates live. --}}
<dialog id="{{ $id }}" class="modal" aria-labelledby="{{ $id }}-title" wire:ignore.self>
    <div class="modal-head">
        <x-admin.eyebrow :icon="$icon">{{ $eyebrow }}</x-admin.eyebrow>
        <button type="button" class="ibtn" data-modal-close aria-label="Close"><i class="fa-light fa-xmark"></i></button>
    </div>
    <h3 class="modal-title" id="{{ $id }}-title">{{ $title }}</h3>
    <div class="modal-body">{{ $slot }}</div>
</dialog>