{# Reusable confirm-then-submit form. Renders a button that opens a small Alpine
   modal asking the user to confirm before posting to `action`. The form's
   hidden inputs include the CSRF token and any extra inputs in `extra_fields`.

   Args:
     - action       (string)  : POST URL.
     - label        (string)  : button text and modal title prefix.
     - description  (string)  : line of explanatory text in the modal.
     - extra_fields (array)   : optional name->value hidden inputs (for "next").
     - btn_class    (string)  : optional override for the trigger-button classes. #}

{% set _btn_class = btn_class|default('rounded-md border border-red-300 bg-white px-2 py-1 text-xs font-medium text-red-700 hover:bg-red-50 dark:border-red-700 dark:bg-slate-900 dark:text-red-300 dark:hover:bg-slate-800') %}

<div x-data="toggle" class="inline-block">
    <button type="button"
            x-on:click="show()"
            class="{{ _btn_class }}">{{ label }}</button>

    <div x-show="open" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4">
        <div x-on:click.outside="hide()"
             class="w-full max-w-sm rounded-2xl border border-slate-200 bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-base font-semibold">{{ label }}?</h2>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">{{ description }}</p>
            <form method="post" action="{{ action }}" class="mt-4 flex justify-end gap-2">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                {% for k, v in extra_fields|default({}) %}
                    <input type="hidden" name="{{ k }}" value="{{ v }}">
                {% endfor %}
                <button type="button" x-on:click="hide()"
                        class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">Cancel</button>
                <button type="submit"
                        class="rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-500">Confirm</button>
            </form>
        </div>
    </div>
</div>