{#
    Confirmation Dialog Component

    Usage:
    1. Include in base template: {% include 'components/_confirm_dialog.html.twig' %}

    2. For form confirmations, use onclick:
       onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete?', 'Are you sure?', 'Delete', 'danger'); return false;"

    3. For JS confirmations:
       window.confirmDialog.show({
           title: 'Confirm Action',
           message: 'Are you sure?',
           confirmText: 'Yes',
           type: 'confirm', // 'confirm', 'danger', 'alert'
           onConfirm: () => { /* action */ }
       });

    4. For alerts:
       window.confirmDialog.alert({
           title: 'Notice',
           message: 'Something happened.'
       });
#}

<div data-controller="confirm-dialog"
     data-action="keydown@window->confirm-dialog#keydown">
    <div data-confirm-dialog-target="dialog"
         data-action="click->confirm-dialog#backdropClick"
         class="hidden fixed inset-0 z-50 items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 transform transition-all">
            {# Icon #}
            <div data-confirm-dialog-target="icon"
                 class="w-12 h-12 rounded-full bg-kitsco-light flex items-center justify-center mx-auto mb-4">
                <i class="bi bi-question-circle text-kitsco-accent text-2xl"></i>
            </div>

            {# Title #}
            <h3 data-confirm-dialog-target="title"
                class="text-lg font-semibold text-gray-900 text-center mb-2">
                Confirm
            </h3>

            {# Message #}
            <p data-confirm-dialog-target="message"
               class="text-gray-600 text-center mb-6">
                Are you sure you want to proceed?
            </p>

            {# Buttons #}
            <div class="flex gap-3 justify-center">
                <button data-confirm-dialog-target="cancelButton"
                        data-action="click->confirm-dialog#cancel"
                        type="button"
                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    Cancel
                </button>
                <button data-confirm-dialog-target="confirmButton"
                        data-action="click->confirm-dialog#confirm"
                        type="button"
                        class="px-4 py-2 text-sm font-medium text-white bg-kitsco-accent rounded-lg hover:bg-kitsco-primary transition-colors">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>