<div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
    x-show="$store.__confirm.open"
    x-cloak
>
    <div class="bg-white rounded-xl shadow-lg max-w-sm w-full mx-4">
        <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
            <h3 class="text-sm font-semibold text-gray-900">
                Confirm Action
            </h3>
            <button
                type="button"
                @click="$store.__confirm.close()"
                class="text-gray-400 hover:text-gray-600"
            >
                ✕
            </button>
        </div>

        <div class="px-4 py-4">
            <p class="text-sm text-gray-700" x-text="$store.__confirm.message"></p>
        </div>

        <div class="flex items-center justify-end gap-2 border-t border-gray-100 px-4 py-3">
            <button
                type="button"
                @click="$store.__confirm.close()"
                class="inline-flex items-center rounded-md border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
            >
                Cancel
            </button>
            <button
                type="button"
                @click="$store.__confirm.confirm()"
                class="inline-flex items-center rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700"
            >
                Confirm
            </button>
        </div>
    </div>
</div>

