fix: show platform name in removal confirmation modal

Changed from static confirm_modal macro to custom modal with Alpine.js
binding to display the platform name dynamically in the confirmation
message.

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

app/templates/admin/admin-user-edit.html

@@ -2,7 +2,6 @@
 {% extends "admin/base.html" %}
 {% from 'shared/macros/alerts.html' import loading_state %}
 {% from 'shared/macros/headers.html' import edit_page_header %}
-{% from 'shared/macros/modals.html' import confirm_modal %}
 
 {% block title %}Edit Admin User{% endblock %}
 
@@ -255,16 +254,71 @@
 </div>
 
 <!-- Remove Platform Confirmation Modal -->
-{{ confirm_modal(
-    'removePlatformModal',
-    'Remove Platform',
-    'Are you sure you want to remove this platform from this admin?',
-    'confirmRemovePlatform()',
-    'showRemovePlatformModal',
-    'Remove',
-    'Cancel',
-    'warning'
-) }}
+<div
+    x-show="showRemovePlatformModal"
+    x-cloak
+    @keydown.escape.window="showRemovePlatformModal = false"
+    class="fixed inset-0 z-50 overflow-y-auto"
+    role="dialog"
+    aria-modal="true"
+>
+    <div
+        x-show="showRemovePlatformModal"
+        x-transition:enter="ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="ease-in duration-200"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
+        @click="showRemovePlatformModal = false"
+    ></div>
+
+    <div class="flex min-h-full items-center justify-center p-4">
+        <div
+            x-show="showRemovePlatformModal"
+            x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0 scale-95"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
+            @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">
+                        Are you sure you want to remove <span class="font-semibold" x-text="platformToRemove?.name"></span> from this admin?
+                    </p>
+                </div>
+            </div>
+
+            <div class="mt-6 flex justify-end gap-3">
+                <button
+                    @click="showRemovePlatformModal = 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="confirmRemovePlatform(); showRemovePlatformModal = false"
+                    type="button"
+                    class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500"
+                >
+                    Remove
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}