{{-- Single, app-wide confirmation dialog backed by the confirmDialog Alpine store (see
     resources/js/app.js). Included once in each layout so any page can trigger it via
     $store.confirmDialog.ask({ title, message, confirmLabel, onConfirm }) instead of a
     native confirm(). --}}
<div x-data>
    <template x-teleport="body">
        <div class="parent-sync-modal-overlay" x-show="$store.confirmDialog.open" x-cloak x-on:click.self="$store.confirmDialog.cancel()" x-on:keydown.escape.window="$store.confirmDialog.cancel()">
            <div class="parent-sync-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-dialog-title">
                <h3 id="confirm-dialog-title" x-text="$store.confirmDialog.title"></h3>
                <p x-text="$store.confirmDialog.message"></p>
                <div class="profile-modal-actions">
                    <button type="button" class="profile-secondary-button" x-on:click="$store.confirmDialog.cancel()">Annuler</button>
                    <button type="button" class="profile-danger-button" x-on:click="$store.confirmDialog.confirm()" x-text="$store.confirmDialog.confirmLabel"></button>
                </div>
            </div>
        </div>
    </template>
</div>