From 9e79a9fd81f5eb575396e920c731c6f81fabbd73 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 24 Jan 2026 21:43:13 +0100
Subject: [PATCH] docs: add confirm_modal_dynamic documentation to components
 page

Added documentation and interactive examples for both confirm_modal
and confirm_modal_dynamic macros, showing danger, warning, info variants
and dynamic message capabilities.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/admin/components.html | 189 ++++++++++++++++++++++++++++
 static/admin/js/components.js       |   6 +
 2 files changed, 195 insertions(+)

diff --git a/app/templates/admin/components.html b/app/templates/admin/components.html
index b98bc6a3..7144b134 100644
--- a/app/templates/admin/components.html
+++ b/app/templates/admin/components.html
@@ -2479,6 +2479,195 @@ goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.paginati
                     </button>
                 </div>
 
+                <!-- Confirmation Modal Macros -->
+                <div class="mb-8">
+                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Confirmation Modal Macros</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                        Use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">confirm_modal</code> and <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">confirm_modal_dynamic</code> macros for styled confirmation dialogs. These support danger, warning, and info variants.
+                    </p>
+
+                    {# Static Confirm Modal Demo #}
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <button
+                                @click="confirmModalVariant = 'danger'; showConfirmModalDemo = true"
+                                class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
+                                Danger Variant
+                            </button>
+                            <button
+                                @click="confirmModalVariant = 'warning'; showConfirmModalDemo = true"
+                                class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
+                                Warning Variant
+                            </button>
+                            <button
+                                @click="confirmModalVariant = 'info'; showConfirmModalDemo = true"
+                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
+                                Info Variant
+                            </button>
+                            <button
+                                @click="dynamicItemName = 'Example Platform'; showDynamicConfirmDemo = true"
+                                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
+                                Dynamic Message
+                            </button>
+                        </div>
+
+                        {# Confirm Modal Demo (Danger) #}
+                        <div
+                            x-show="showConfirmModalDemo && confirmModalVariant === 'danger'"
+                            x-cloak
+                            @keydown.escape.window="showConfirmModalDemo = false"
+                            class="fixed inset-0 z-50 overflow-y-auto"
+                            role="dialog"
+                            aria-modal="true">
+                            <div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
+                            <div class="flex min-h-full items-center justify-center p-4">
+                                <div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
+                                    <div class="flex items-start">
+                                        <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30">
+                                            <span x-html="$icon('exclamation-triangle', 'w-6 h-6 text-red-600 dark:text-red-400')"></span>
+                                        </div>
+                                        <div class="ml-4 flex-1">
+                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Delete Item</h3>
+                                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to delete this item? This action cannot be undone.</p>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 flex justify-end gap-3">
+                                        <button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
+                                        <button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-red-600 hover:bg-red-700">Delete</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {# Confirm Modal Demo (Warning) #}
+                        <div
+                            x-show="showConfirmModalDemo && confirmModalVariant === 'warning'"
+                            x-cloak
+                            @keydown.escape.window="showConfirmModalDemo = false"
+                            class="fixed inset-0 z-50 overflow-y-auto"
+                            role="dialog"
+                            aria-modal="true">
+                            <div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
+                            <div class="flex min-h-full items-center justify-center p-4">
+                                <div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
+                                    <div class="flex items-start">
+                                        <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
+                                            <span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-600 dark:text-yellow-400')"></span>
+                                        </div>
+                                        <div class="ml-4 flex-1">
+                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Remove Access</h3>
+                                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to remove access? The user will need to be re-invited.</p>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 flex justify-end gap-3">
+                                        <button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
+                                        <button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-yellow-600 hover:bg-yellow-700">Remove</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {# Confirm Modal Demo (Info) #}
+                        <div
+                            x-show="showConfirmModalDemo && confirmModalVariant === 'info'"
+                            x-cloak
+                            @keydown.escape.window="showConfirmModalDemo = false"
+                            class="fixed inset-0 z-50 overflow-y-auto"
+                            role="dialog"
+                            aria-modal="true">
+                            <div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
+                            <div class="flex min-h-full items-center justify-center p-4">
+                                <div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
+                                    <div class="flex items-start">
+                                        <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30">
+                                            <span x-html="$icon('information-circle', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
+                                        </div>
+                                        <div class="ml-4 flex-1">
+                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Publish Changes</h3>
+                                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to publish these changes? They will be visible to all users.</p>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 flex justify-end gap-3">
+                                        <button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
+                                        <button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-blue-600 hover:bg-blue-700">Publish</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {# Dynamic Confirm Modal Demo #}
+                        <div
+                            x-show="showDynamicConfirmDemo"
+                            x-cloak
+                            @keydown.escape.window="showDynamicConfirmDemo = false"
+                            class="fixed inset-0 z-50 overflow-y-auto"
+                            role="dialog"
+                            aria-modal="true">
+                            <div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showDynamicConfirmDemo = false"></div>
+                            <div class="flex min-h-full items-center justify-center p-4">
+                                <div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
+                                    <div class="flex items-start">
+                                        <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
+                                            <span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-600 dark:text-yellow-400')"></span>
+                                        </div>
+                                        <div class="ml-4 flex-1">
+                                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Remove Platform</h3>
+                                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400" x-text="'Are you sure you want to remove \"' + dynamicItemName + '\" from this admin?'"></p>
+                                        </div>
+                                    </div>
+                                    <div class="mt-6 flex justify-end gap-3">
+                                        <button @click="showDynamicConfirmDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
+                                        <button @click="showDynamicConfirmDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-yellow-600 hover:bg-yellow-700">Remove</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="space-y-4">
+                        <div>
+                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Static Message (confirm_modal):</p>
+                            <button @click="copyCode(`{% from 'shared/macros/modals.html' import confirm_modal %}
+
+{{ confirm_modal(
+    'deleteConfirm',
+    'Delete Item',
+    'Are you sure you want to delete this item?',
+    'deleteItem()',
+    'showDeleteModal',
+    'Delete',
+    'Cancel',
+    'danger'
+) }}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
+                                <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
+                                Copy Code
+                            </button>
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dynamic Message (confirm_modal_dynamic):</p>
+                            <button @click="copyCode(`{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
+
+{{ confirm_modal_dynamic(
+    'removePlatformModal',
+    'Remove Platform',
+    \"'Are you sure you want to remove \\\"' + (platformToRemove?.name || '') + '\\\" from this admin?'\",
+    'confirmRemovePlatform()',
+    'showRemovePlatformModal',
+    'Remove',
+    'Cancel',
+    'warning'
+) }}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
+                                <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
+                                Copy Code
+                            </button>
+                        </div>
+                    </div>
+
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">
+                        <strong>Parameters:</strong> id, title, message (or message_var for dynamic), confirm_action, show_var, confirm_text, cancel_text, variant ('danger'|'warning'|'info'), icon
+                    </p>
+                </div>
+
                 <!-- Details Modal Pattern -->
                 <div class="mb-8">
                     <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Details Modal (Table Layout)</h3>
diff --git a/static/admin/js/components.js b/static/admin/js/components.js
index 04c65b41..fbd93a44 100644
--- a/static/admin/js/components.js
+++ b/static/admin/js/components.js
@@ -429,6 +429,12 @@ function adminComponents() {
         showLogModal: false,
         exampleLog: null,
 
+        // Confirm modal demo state
+        showConfirmModalDemo: false,
+        confirmModalVariant: 'danger',
+        showDynamicConfirmDemo: false,
+        dynamicItemName: '',
+
         // Example log data for demo
         showErrorLogDemo() {
             this.exampleLog = {