@props([
    'id',
    'action',
    'title',
    'label' => null,
    'message' => null,
    'confirmLabel' => null,
    'method' => 'post',
    'variant' => 'error',
])

@php($messageId = filled($message) ? $id.'-message' : null)

{{-- Confirmação nativa por Popover (sem JS): o gatilho é um `<button>`; `Esc`/light-dismiss
     fecham; o formulário interno nunca é aninhado em outro (o chamador usa fora de `<form>`).
     Teclado: o popover entra na ordem de foco depois do gatilho; sem Popover, o conteúdo fica
     no fluxo e continua utilizável. --}}
<button type="button" class="btn btn-{{ $variant }}" popovertarget="{{ $id }}">
    {{ $label ?? __('layout::shell.confirm') }}
</button>

<div id="{{ $id }}" popover role="dialog"
     aria-labelledby="{{ $id }}-title"
     @if ($messageId !== null) aria-describedby="{{ $messageId }}" @endif
     class="cms-modal">
    <div class="cms-modal__panel">
        <h2 id="{{ $id }}-title" class="cms-modal__title">{{ $title }}</h2>

        @if (filled($message))
            <p id="{{ $messageId }}" class="cms-modal__body">{{ $message }}</p>
        @endif

        <form method="post" action="{{ $action }}">
            @csrf
            @if (strtolower($method) !== 'post')
                @method(strtoupper($method))
            @endif

            {{ $fields ?? '' }}

            <div class="cms-modal__actions">
                <button type="submit" class="btn btn-{{ $variant }}">
                    {{ $confirmLabel ?? __('layout::shell.confirm') }}
                </button>

                <button type="button" class="btn btn-ghost"
                        popovertarget="{{ $id }}" popovertargetaction="hide">
                    <x-ui::icon name="x" />
                    <span>{{ __('layout::shell.cancel') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>