refactor(loyalty): replace inline modals with shared modal macros

Replace hand-written inline modal HTML in programs.html,
merchant-detail.html, and program-edit.html with the project's
confirm_modal, confirm_modal_dynamic, and modal macros from
shared/macros/modals.html. Resolves all 4 FE-004 architecture warnings.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/modules/loyalty/templates/loyalty/admin/merchant-detail.html

@@ -3,6 +3,7 @@
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/headers.html' import detail_page_header %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import confirm_modal %}
 
 {% block title %}Merchant Loyalty Details{% endblock %}
 
@@ -182,25 +183,16 @@
     </div>
 
     <!-- Delete Confirmation Modal -->
-    <div x-show="showDeleteModal" x-cloak
-         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
-            <p class="text-gray-600 dark:text-gray-400 mb-4">
-                This will permanently delete the loyalty program and all associated data. This action cannot be undone.
-            </p>
-            <div class="flex justify-end gap-3">
-                <button @click="showDeleteModal = false"
-                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                    Cancel
-                </button>
-                <button @click="deleteProgram()"
-                        class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
-                    Delete Program
-                </button>
-            </div>
-        </div>
-    </div>
+    {{ confirm_modal(
+        'deleteProgramModal',
+        'Delete Loyalty Program',
+        'This will permanently delete the loyalty program and all associated data. This action cannot be undone.',
+        'deleteProgram()',
+        'showDeleteModal',
+        'Delete Program',
+        'Cancel',
+        'danger'
+    ) }}
 
     <!-- Location Breakdown -->
     <div x-show="locations.length > 0" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">

app/modules/loyalty/templates/loyalty/admin/program-edit.html

@@ -2,6 +2,7 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/headers.html' import detail_page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/modals.html' import confirm_modal %}
 
 {% block title %}Program Configuration{% endblock %}
 
@@ -225,26 +226,16 @@
 </div>
 
 <!-- Delete Confirmation Modal -->
-<div x-show="showDeleteModal" x-cloak
-     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">
-            This will permanently delete the loyalty program and all associated data (cards, transactions, rewards).
-            This action cannot be undone.
-        </p>
-        <div class="flex justify-end gap-3">
-            <button @click="showDeleteModal = false"
-                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                Cancel
-            </button>
-            <button @click="deleteProgram()" :disabled="deleting"
-                    class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50">
-                <span x-text="deleting ? 'Deleting...' : 'Delete Program'"></span>
-            </button>
-        </div>
-    </div>
-</div>
+{{ confirm_modal(
+    'deleteProgramModal',
+    'Delete Loyalty Program',
+    'This will permanently delete the loyalty program and all associated data (cards, transactions, rewards). This action cannot be undone.',
+    'deleteProgram()',
+    'showDeleteModal',
+    'Delete Program',
+    'Cancel',
+    'danger'
+) }}
 {% endblock %}
 
 {% block extra_scripts %}

app/modules/loyalty/templates/loyalty/admin/programs.html

@@ -4,6 +4,7 @@
 {% from 'shared/macros/headers.html' import page_header %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
+{% from 'shared/macros/modals.html' import modal, confirm_modal_dynamic %}
 
 {% block title %}Loyalty Programs{% endblock %}
 
@@ -255,34 +256,19 @@
 </div>
 
 <!-- Delete Confirmation Modal -->
-<div x-show="showDeleteModal" x-cloak
-     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete Loyalty Program</h3>
-        <p class="text-gray-600 dark:text-gray-400 mb-1">
-            Delete the loyalty program for <strong x-text="deletingProgram?.merchant_name"></strong>?
-        </p>
-        <p class="text-sm text-red-600 dark:text-red-400 mb-4">
-            This will permanently remove the program and all associated data (cards, transactions, rewards). This cannot be undone.
-        </p>
-        <div class="flex justify-end gap-3">
-            <button @click="showDeleteModal = false; deletingProgram = null"
-                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                Cancel
-            </button>
-            <button @click="deleteProgram()"
-                    class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
-                Delete Program
-            </button>
-        </div>
-    </div>
-</div>
+{{ confirm_modal_dynamic(
+    'deleteProgramModal',
+    'Delete Loyalty Program',
+    "'Delete the loyalty program for \"' + (deletingProgram?.merchant_name || '') + '\"? This will permanently remove all associated data (cards, transactions, rewards). This cannot be undone.'",
+    'deleteProgram()',
+    'showDeleteModal',
+    'Delete Program',
+    'Cancel',
+    'danger'
+) }}
 
 <!-- Create Program Modal -->
-<div x-show="showCreateModal" x-cloak
-     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-lg w-full mx-4">
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Create Loyalty Program</h3>
+{% call modal('createProgramModal', 'Create Loyalty Program', 'showCreateModal', show_footer=false) %}
     <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
         Select a merchant to create a loyalty program for.
     </p>
@@ -349,8 +335,7 @@
             Continue
         </button>
     </div>
-    </div>
-</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}