From f7ca6c0747f97fe686a171c34c1bb31065a66e36 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 24 Jan 2026 21:53:15 +0100
Subject: [PATCH] refactor: align copy code pattern with rest of components
 page

Use inline template literals with {% raw %}{% endraw %} and HTML entities
(&quot;) for quotes, consistent with other copy code buttons on the page.
Removed the codeSnippets JS variables.

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

diff --git a/app/templates/admin/components.html b/app/templates/admin/components.html
index 91af3983..f9824efd 100644
--- a/app/templates/admin/components.html
+++ b/app/templates/admin/components.html
@@ -2626,24 +2626,40 @@ goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.paginati
 
                     <div class="space-y-4">
                         <div>
-                            <div class="flex items-center justify-between mb-2">
-                                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Static Message (confirm_modal):</p>
-                                <button @click="copyCode(codeSnippets.confirmModal)" 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
-                                </button>
-                            </div>
-                            <pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModal"></code></pre>
+                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Static Message (confirm_modal):</p>
+                            <button @click="copyCode(`{% raw %}{% 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'
+) }}{% endraw %}`)" 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>
-                            <div class="flex items-center justify-between mb-2">
-                                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Dynamic Message (confirm_modal_dynamic):</p>
-                                <button @click="copyCode(codeSnippets.confirmModalDynamic)" 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
-                                </button>
-                            </div>
-                            <pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModalDynamic"></code></pre>
+                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dynamic Message (confirm_modal_dynamic):</p>
+                            <button @click="copyCode(`{% raw %}{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
+
+{{ confirm_modal_dynamic(
+    'removePlatformModal',
+    'Remove Platform',
+    &quot;'Are you sure you want to remove ' + (item?.name || '') + '?'&quot;,
+    'confirmRemove()',
+    'showConfirmModal',
+    'Remove',
+    'Cancel',
+    'warning'
+) }}{% endraw %}`)" 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>
 
diff --git a/static/admin/js/components.js b/static/admin/js/components.js
index 445011ef..fbd93a44 100644
--- a/static/admin/js/components.js
+++ b/static/admin/js/components.js
@@ -435,34 +435,6 @@ function adminComponents() {
         showDynamicConfirmDemo: false,
         dynamicItemName: '',
 
-        // Code snippets for confirm modal macros
-        codeSnippets: {
-            confirmModal: `{% 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'
-) }}`,
-            confirmModalDynamic: `{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
-
-{{ confirm_modal_dynamic(
-    'removePlatformModal',
-    'Remove Platform',
-    "'Are you sure you want to remove \\\"' + (item?.name || '') + '\\\" ?'",
-    'confirmRemove()',
-    'showConfirmModal',
-    'Remove',
-    'Cancel',
-    'warning'
-) }}`
-        },
-
         // Example log data for demo
         showErrorLogDemo() {
             this.exampleLog = {