diff --git a/weed/admin/static/js/modal-alerts.js b/weed/admin/static/js/modal-alerts.js
new file mode 100644
index 000000000..612bc1961
--- /dev/null
+++ b/weed/admin/static/js/modal-alerts.js
@@ -0,0 +1,302 @@
+/**
+ * Modal Alerts - Bootstrap Modal replacement for native alert() and confirm()
+ * Fixes Chrome auto-dismiss issue with native dialogs
+ * 
+ * Usage:
+ *   showAlert('Message', 'success');
+ *   showConfirm('Delete this?', function() { });
+ */
+
+(function() {
+    'use strict';
+
+    // Create and inject modal HTML into page if not already present
+    function ensureModalsExist() {
+        if (document.getElementById('globalAlertModal')) {
+            return; // Already exists
+        }
+
+        const modalsHTML = `
+            <!-- Global Alert Modal -->
+            <div class="modal fade" id="globalAlertModal" tabindex="-1" aria-labelledby="globalAlertModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header" id="globalAlertModalHeader">
+                            <h5 class="modal-title" id="globalAlertModalLabel">
+                                <i class="fas fa-info-circle me-2" id="globalAlertModalIcon"></i>
+                                <span id="globalAlertModalTitle">Notice</span>
+                            </h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body" id="globalAlertModalBody">
+                            <!-- Message will be inserted here -->
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Global Confirm Modal -->
+            <div class="modal fade" id="globalConfirmModal" tabindex="-1" aria-labelledby="globalConfirmModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header bg-warning">
+                            <h5 class="modal-title" id="globalConfirmModalLabel">
+                                <i class="fas fa-question-circle me-2"></i>Confirm Action
+                            </h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body" id="globalConfirmModalBody">
+                            <!-- Message will be inserted here -->
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="globalConfirmCancelBtn">Cancel</button>
+                            <button type="button" class="btn btn-primary" id="globalConfirmOkBtn">OK</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Global Delete Confirm Modal -->
+            <div class="modal fade" id="globalDeleteModal" tabindex="-1" aria-labelledby="globalDeleteModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header bg-danger text-white">
+                            <h5 class="modal-title" id="globalDeleteModalLabel">
+                                <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
+                            </h5>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <p class="mb-2" id="globalDeleteModalMessage">Are you sure you want to delete this item?</p>
+                            <p class="mb-0"><strong id="globalDeleteModalItemName"></strong></p>
+                            <p class="text-muted small mt-2 mb-0">This action cannot be undone.</p>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                            <button type="button" class="btn btn-danger" id="globalDeleteConfirmBtn">
+                                <i class="fas fa-trash me-1"></i>Delete
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Inject modals at end of body
+        document.body.insertAdjacentHTML('beforeend', modalsHTML);
+    }
+
+    /**
+     * Show an alert message using Bootstrap modal
+     * @param {string} message - The message to display
+     * @param {string} type - Type: 'success', 'error', 'warning', 'info' (default: 'info')
+     * @param {string} title - Optional custom title
+     */
+    window.showAlert = function(message, type, title) {
+        ensureModalsExist();
+
+        const modal = document.getElementById('globalAlertModal');
+        const header = document.getElementById('globalAlertModalHeader');
+        const titleEl = document.getElementById('globalAlertModalTitle');
+        const bodyEl = document.getElementById('globalAlertModalBody');
+        const iconEl = document.getElementById('globalAlertModalIcon');
+
+        // Configuration for different types
+        const types = {
+            'success': { 
+                title: 'Success', 
+                icon: 'fa-check-circle', 
+                headerClass: 'bg-success text-white', 
+                btnClose: 'btn-close-white' 
+            },
+            'error': { 
+                title: 'Error', 
+                icon: 'fa-exclamation-triangle', 
+                headerClass: 'bg-danger text-white', 
+                btnClose: 'btn-close-white' 
+            },
+            'warning': { 
+                title: 'Warning', 
+                icon: 'fa-exclamation-circle', 
+                headerClass: 'bg-warning text-dark', 
+                btnClose: '' 
+            },
+            'info': { 
+                title: 'Notice', 
+                icon: 'fa-info-circle', 
+                headerClass: 'bg-info text-white', 
+                btnClose: 'btn-close-white' 
+            }
+        };
+
+        const config = types[type] || types['info'];
+
+        // Update header styling
+        header.className = 'modal-header ' + config.headerClass;
+        const closeBtn = header.querySelector('.btn-close');
+        closeBtn.className = 'btn-close ' + config.btnClose;
+
+        // Update icon
+        iconEl.className = 'fas ' + config.icon + ' me-2';
+
+        // Update title
+        titleEl.textContent = title || config.title;
+
+        // Update body - support HTML or text
+        if (message.includes('<')) {
+            bodyEl.innerHTML = message;
+        } else {
+            bodyEl.innerHTML = '<p class="mb-0">' + escapeHtml(message) + '</p>';
+        }
+
+        // Show modal
+        const bsModal = new bootstrap.Modal(modal);
+        bsModal.show();
+    };
+
+    /**
+     * Show a confirmation dialog using Bootstrap modal
+     * @param {string} message - The confirmation message
+     * @param {function} onConfirm - Callback function if user confirms
+     * @param {function} onCancel - Optional callback function if user cancels
+     * @param {string} title - Optional custom title
+     */
+    window.showConfirm = function(message, onConfirm, onCancel, title) {
+        ensureModalsExist();
+
+        const modalEl = document.getElementById('globalConfirmModal');
+        const bodyEl = document.getElementById('globalConfirmModalBody');
+        const titleEl = document.getElementById('globalConfirmModalLabel').querySelector('span');
+        const okBtn = document.getElementById('globalConfirmOkBtn');
+        const cancelBtn = document.getElementById('globalConfirmCancelBtn');
+
+        // Set title if provided
+        if (title) {
+            if (titleEl) {
+                titleEl.textContent = title;
+            } else {
+                document.getElementById('globalConfirmModalLabel').insertAdjacentHTML('beforeend', '<span>' + escapeHtml(title) + '</span>');
+            }
+        }
+
+        // Set message
+        if (message.includes('<')) {
+            bodyEl.innerHTML = message;
+        } else {
+            bodyEl.innerHTML = '<p class="mb-0">' + escapeHtml(message) + '</p>';
+        }
+
+        // Remove old event listeners by cloning buttons
+        const newOkBtn = okBtn.cloneNode(true);
+        const newCancelBtn = cancelBtn.cloneNode(true);
+        okBtn.parentNode.replaceChild(newOkBtn, okBtn);
+        cancelBtn.parentNode.replaceChild(newCancelBtn, cancelBtn);
+
+        const modal = new bootstrap.Modal(modalEl);
+
+        // Add event listeners
+        newOkBtn.addEventListener('click', function() {
+            modal.hide();
+            if (typeof onConfirm === 'function') {
+                onConfirm();
+            }
+        });
+
+        newCancelBtn.addEventListener('click', function() {
+            modal.hide();
+            if (typeof onCancel === 'function') {
+                onCancel();
+            }
+        });
+
+        modal.show();
+    };
+
+    /**
+     * Show a delete confirmation dialog
+     * @param {string} itemName - Name of the item to delete
+     * @param {function} onConfirm - Callback function if user confirms deletion
+     * @param {string} message - Optional custom message (default: "Are you sure you want to delete this item?")
+     */
+    window.showDeleteConfirm = function(itemName, onConfirm, message) {
+        ensureModalsExist();
+
+        const modalEl = document.getElementById('globalDeleteModal');
+        const messageEl = document.getElementById('globalDeleteModalMessage');
+        const itemNameEl = document.getElementById('globalDeleteModalItemName');
+        const confirmBtn = document.getElementById('globalDeleteConfirmBtn');
+
+        // Set custom message if provided
+        if (message) {
+            messageEl.textContent = message;
+        } else {
+            messageEl.textContent = 'Are you sure you want to delete this item?';
+        }
+
+        // Set item name
+        itemNameEl.textContent = itemName;
+
+        // Remove old event listener by cloning button
+        const newConfirmBtn = confirmBtn.cloneNode(true);
+        confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
+
+        const modal = new bootstrap.Modal(modalEl);
+
+        // Add new event listener
+        newConfirmBtn.addEventListener('click', function() {
+            modal.hide();
+            if (typeof onConfirm === 'function') {
+                onConfirm();
+            }
+        });
+
+        modal.show();
+    };
+
+    /**
+     * Escape HTML to prevent XSS
+     */
+    function escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
+    }
+
+    // Auto-initialize on DOMContentLoaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', ensureModalsExist);
+    } else {
+        ensureModalsExist();
+    }
+
+    /**
+     * AUTOMATIC OVERRIDE of native alert()
+     * This makes ALL existing alert() calls automatically use Bootstrap modals
+     */
+    window.alert = function(message) {
+        // Auto-detect message type from content
+        let type = 'info';
+        const msgLower = (message || '').toLowerCase();
+        
+        if (msgLower.includes('success') || msgLower.includes('created') || msgLower.includes('updated') || msgLower.includes('saved')) {
+            type = 'success';
+        } else if (msgLower.includes('error') || msgLower.includes('failed') || msgLower.includes('invalid') || msgLower.includes('cannot')) {
+            type = 'error';
+        } else if (msgLower.includes('warning') || msgLower.includes('please') || msgLower.includes('required')) {
+            type = 'warning';
+        }
+
+        showAlert(message, type);
+    };
+
+    console.log('Modal Alerts library loaded - native alert() overridden');
+    console.log('For confirm(), use showConfirm() or showDeleteConfirm() instead of native confirm()');
+})();
diff --git a/weed/admin/view/app/cluster_ec_shards.templ b/weed/admin/view/app/cluster_ec_shards.templ
index 19f6fd2d6..d7180f2bb 100644
--- a/weed/admin/view/app/cluster_ec_shards.templ
+++ b/weed/admin/view/app/cluster_ec_shards.templ
@@ -387,7 +387,7 @@ templ ClusterEcShards(data dash.ClusterEcShardsData) {
             // Get data from the button element (not the icon inside it)
             const button = event.target.closest('button');
             const volumeId = button.getAttribute('data-volume-id');
-            if (confirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`)) {
+            showConfirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`, function() {
                 fetch(`/api/storage/volumes/${volumeId}/repair`, {
                     method: 'POST',
                     headers: {
@@ -406,7 +406,7 @@ templ ClusterEcShards(data dash.ClusterEcShardsData) {
                 .catch(error => {
                     alert('Error: ' + error.message);
                 });
-            }
+            });
         }
     </script>
 }
diff --git a/weed/admin/view/app/cluster_ec_shards_templ.go b/weed/admin/view/app/cluster_ec_shards_templ.go
index b7c169d1e..31cf8f9bd 100644
--- a/weed/admin/view/app/cluster_ec_shards_templ.go
+++ b/weed/admin/view/app/cluster_ec_shards_templ.go
@@ -663,7 +663,7 @@ func ClusterEcShards(data dash.ClusterEcShardsData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 89, "<!-- JavaScript --><script>\n        function sortBy(field) {\n            const currentSort = \"{data.SortBy}\";\n            const currentOrder = \"{data.SortOrder}\";\n            let newOrder = 'asc';\n            \n            if (currentSort === field && currentOrder === 'asc') {\n                newOrder = 'desc';\n            }\n            \n            updateUrl({\n                sortBy: field,\n                sortOrder: newOrder,\n                page: 1\n            });\n        }\n\n        function goToPage(event) {\n            // Get data from the link element (not any child elements)\n            const link = event.target.closest('a');\n            const page = link.getAttribute('data-page');\n            updateUrl({ page: page });\n        }\n\n        function changePageSize() {\n            const pageSize = document.getElementById('pageSizeSelect').value;\n            updateUrl({ pageSize: pageSize, page: 1 });\n        }\n\n        function updateUrl(params) {\n            const url = new URL(window.location);\n            Object.keys(params).forEach(key => {\n                if (params[key]) {\n                    url.searchParams.set(key, params[key]);\n                } else {\n                    url.searchParams.delete(key);\n                }\n            });\n            window.location.href = url.toString();\n        }\n\n        function exportEcShards() {\n            const url = new URL('/api/storage/ec-shards/export', window.location.origin);\n            const params = new URLSearchParams(window.location.search);\n            params.forEach((value, key) => {\n                url.searchParams.set(key, value);\n            });\n            window.open(url.toString(), '_blank');\n        }\n\n        function showShardDetails(event) {\n            // Get data from the button element (not the icon inside it)\n            const button = event.target.closest('button');\n            const volumeId = button.getAttribute('data-volume-id');\n            \n            // Navigate to the EC volume details page\n            window.location.href = `/storage/ec-volumes/${volumeId}`;\n        }\n\n        function repairVolume(event) {\n            // Get data from the button element (not the icon inside it)\n            const button = event.target.closest('button');\n            const volumeId = button.getAttribute('data-volume-id');\n            if (confirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`)) {\n                fetch(`/api/storage/volumes/${volumeId}/repair`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        alert('Repair initiated successfully');\n                        location.reload();\n                    } else {\n                        alert('Failed to initiate repair: ' + data.error);\n                    }\n                })\n                .catch(error => {\n                    alert('Error: ' + error.message);\n                });\n            }\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 89, "<!-- JavaScript --><script>\n        function sortBy(field) {\n            const currentSort = \"{data.SortBy}\";\n            const currentOrder = \"{data.SortOrder}\";\n            let newOrder = 'asc';\n            \n            if (currentSort === field && currentOrder === 'asc') {\n                newOrder = 'desc';\n            }\n            \n            updateUrl({\n                sortBy: field,\n                sortOrder: newOrder,\n                page: 1\n            });\n        }\n\n        function goToPage(event) {\n            // Get data from the link element (not any child elements)\n            const link = event.target.closest('a');\n            const page = link.getAttribute('data-page');\n            updateUrl({ page: page });\n        }\n\n        function changePageSize() {\n            const pageSize = document.getElementById('pageSizeSelect').value;\n            updateUrl({ pageSize: pageSize, page: 1 });\n        }\n\n        function updateUrl(params) {\n            const url = new URL(window.location);\n            Object.keys(params).forEach(key => {\n                if (params[key]) {\n                    url.searchParams.set(key, params[key]);\n                } else {\n                    url.searchParams.delete(key);\n                }\n            });\n            window.location.href = url.toString();\n        }\n\n        function exportEcShards() {\n            const url = new URL('/api/storage/ec-shards/export', window.location.origin);\n            const params = new URLSearchParams(window.location.search);\n            params.forEach((value, key) => {\n                url.searchParams.set(key, value);\n            });\n            window.open(url.toString(), '_blank');\n        }\n\n        function showShardDetails(event) {\n            // Get data from the button element (not the icon inside it)\n            const button = event.target.closest('button');\n            const volumeId = button.getAttribute('data-volume-id');\n            \n            // Navigate to the EC volume details page\n            window.location.href = `/storage/ec-volumes/${volumeId}`;\n        }\n\n        function repairVolume(event) {\n            // Get data from the button element (not the icon inside it)\n            const button = event.target.closest('button');\n            const volumeId = button.getAttribute('data-volume-id');\n            showConfirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`, function() {\n                fetch(`/api/storage/volumes/${volumeId}/repair`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        alert('Repair initiated successfully');\n                        location.reload();\n                    } else {\n                        alert('Failed to initiate repair: ' + data.error);\n                    }\n                })\n                .catch(error => {\n                    alert('Error: ' + error.message);\n                });\n            });\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/cluster_ec_volumes.templ b/weed/admin/view/app/cluster_ec_volumes.templ
index 6e94443ae..de0f32168 100644
--- a/weed/admin/view/app/cluster_ec_volumes.templ
+++ b/weed/admin/view/app/cluster_ec_volumes.templ
@@ -378,7 +378,7 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
 
         function repairVolume(event) {
             const volumeId = event.target.closest('button').getAttribute('data-volume-id');
-            if (confirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`)) {
+            showConfirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`, function() {
                 fetch(`/api/storage/ec-volumes/${volumeId}/repair`, {
                     method: 'POST',
                     headers: {
@@ -402,7 +402,7 @@ templ ClusterEcVolumes(data dash.ClusterEcVolumesData) {
                 .catch(error => {
                     alert('Error: ' + error.message);
                 });
-            }
+            });
         }
     </script>
 }
diff --git a/weed/admin/view/app/cluster_ec_volumes_templ.go b/weed/admin/view/app/cluster_ec_volumes_templ.go
index 9103607a8..1c83c51ba 100644
--- a/weed/admin/view/app/cluster_ec_volumes_templ.go
+++ b/weed/admin/view/app/cluster_ec_volumes_templ.go
@@ -757,7 +757,7 @@ func ClusterEcVolumes(data dash.ClusterEcVolumesData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 96, "<!-- JavaScript --><script>\n        function sortBy(field) {\n            const currentSort = new URLSearchParams(window.location.search).get('sort_by');\n            const currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';\n            \n            let newOrder = 'asc';\n            if (currentSort === field && currentOrder === 'asc') {\n                newOrder = 'desc';\n            }\n            \n            updateUrl({\n                sort_by: field,\n                sort_order: newOrder,\n                page: 1\n            });\n        }\n\n        function goToPage(event) {\n            event.preventDefault();\n            const page = event.target.closest('a').getAttribute('data-page');\n            updateUrl({ page: page });\n        }\n\n        function changePageSize(newPageSize) {\n            updateUrl({ page_size: newPageSize, page: 1 });\n        }\n\n        function updateUrl(params) {\n            const url = new URL(window.location);\n            Object.keys(params).forEach(key => {\n                if (params[key] != null) {\n                    url.searchParams.set(key, params[key]);\n                } else {\n                    url.searchParams.delete(key);\n                }\n            });\n            window.location.href = url.toString();\n        }\n\n        function showVolumeDetails(event) {\n            const volumeId = event.target.closest('button').getAttribute('data-volume-id');\n            window.location.href = `/storage/ec-volumes/${volumeId}`;\n        }\n\n        function repairVolume(event) {\n            const volumeId = event.target.closest('button').getAttribute('data-volume-id');\n            if (confirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`)) {\n                fetch(`/api/storage/ec-volumes/${volumeId}/repair`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    }\n                })\n                .then(response => {\n                    if (!response.ok) {\n                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n                    }\n                    return response.json();\n                })\n                .then(data => {\n                    if (data && data.success) {\n                        alert('Repair initiated successfully');\n                        location.reload();\n                    } else {\n                        alert('Failed to initiate repair: ' + (data && data.error ? data.error : 'Unknown error'));\n                    }\n                })\n                .catch(error => {\n                    alert('Error: ' + error.message);\n                });\n            }\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 96, "<!-- JavaScript --><script>\n        function sortBy(field) {\n            const currentSort = new URLSearchParams(window.location.search).get('sort_by');\n            const currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';\n            \n            let newOrder = 'asc';\n            if (currentSort === field && currentOrder === 'asc') {\n                newOrder = 'desc';\n            }\n            \n            updateUrl({\n                sort_by: field,\n                sort_order: newOrder,\n                page: 1\n            });\n        }\n\n        function goToPage(event) {\n            event.preventDefault();\n            const page = event.target.closest('a').getAttribute('data-page');\n            updateUrl({ page: page });\n        }\n\n        function changePageSize(newPageSize) {\n            updateUrl({ page_size: newPageSize, page: 1 });\n        }\n\n        function updateUrl(params) {\n            const url = new URL(window.location);\n            Object.keys(params).forEach(key => {\n                if (params[key] != null) {\n                    url.searchParams.set(key, params[key]);\n                } else {\n                    url.searchParams.delete(key);\n                }\n            });\n            window.location.href = url.toString();\n        }\n\n        function showVolumeDetails(event) {\n            const volumeId = event.target.closest('button').getAttribute('data-volume-id');\n            window.location.href = `/storage/ec-volumes/${volumeId}`;\n        }\n\n        function repairVolume(event) {\n            const volumeId = event.target.closest('button').getAttribute('data-volume-id');\n            showConfirm(`Are you sure you want to repair missing shards for volume ${volumeId}?`, function() {\n                fetch(`/api/storage/ec-volumes/${volumeId}/repair`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    }\n                })\n                .then(response => {\n                    if (!response.ok) {\n                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n                    }\n                    return response.json();\n                })\n                .then(data => {\n                    if (data && data.success) {\n                        alert('Repair initiated successfully');\n                        location.reload();\n                    } else {\n                        alert('Failed to initiate repair: ' + (data && data.error ? data.error : 'Unknown error'));\n                    }\n                })\n                .catch(error => {\n                    alert('Error: ' + error.message);\n                });\n            });\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/collection_details.templ b/weed/admin/view/app/collection_details.templ
index 296839b93..46075613c 100644
--- a/weed/admin/view/app/collection_details.templ
+++ b/weed/admin/view/app/collection_details.templ
@@ -372,10 +372,10 @@ templ CollectionDetails(data dash.CollectionDetailsData) {
 		// Repair EC Volume
 		function repairEcVolume(event) {
 			const volumeId = event.target.closest('button').getAttribute('data-volume-id');
-			if (confirm(`Are you sure you want to repair missing shards for EC volume ${volumeId}?`)) {
+   showConfirm(`Are you sure you want to repair missing shards for EC volume ${volumeId}?`, function() {
 				// TODO: Implement repair functionality
 				alert('Repair functionality will be implemented soon.');
-			}
+			});
 		}
 	</script>
 } 
\ No newline at end of file
diff --git a/weed/admin/view/app/collection_details_templ.go b/weed/admin/view/app/collection_details_templ.go
index f2ff0ab13..762f3c391 100644
--- a/weed/admin/view/app/collection_details_templ.go
+++ b/weed/admin/view/app/collection_details_templ.go
@@ -575,7 +575,7 @@ func CollectionDetails(data dash.CollectionDetailsData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "<script>\n\t\t// Sorting functionality\n\t\tfunction sortBy(field) {\n\t\t\tconst currentSort = new URLSearchParams(window.location.search).get('sort_by');\n\t\t\tconst currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';\n\t\t\t\n\t\t\tlet newOrder = 'asc';\n\t\t\tif (currentSort === field && currentOrder === 'asc') {\n\t\t\t\tnewOrder = 'desc';\n\t\t\t}\n\t\t\t\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set('sort_by', field);\n\t\t\turl.searchParams.set('sort_order', newOrder);\n\t\t\turl.searchParams.set('page', '1'); // Reset to first page\n\t\t\twindow.location.href = url.toString();\n\t\t}\n\n\t\t// Pagination functionality\n\t\tfunction goToPage(event) {\n\t\t\tevent.preventDefault();\n\t\t\tconst page = event.target.closest('a').getAttribute('data-page');\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set('page', page);\n\t\t\twindow.location.href = url.toString();\n\t\t}\n\n\t\t// Page size functionality\n\t\tfunction changePageSize(newPageSize) {\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set('page_size', newPageSize);\n\t\t\turl.searchParams.set('page', '1'); // Reset to first page when changing page size\n\t\t\twindow.location.href = url.toString();\n\t\t}\n\n\t\t// Volume details\n\t\tfunction showVolumeDetails(event) {\n\t\t\tconst volumeId = event.target.closest('button').getAttribute('data-volume-id');\n\t\t\tconst server = event.target.closest('button').getAttribute('data-server');\n\t\t\twindow.location.href = `/storage/volumes/${volumeId}/${server}`;\n\t\t}\n\n\t\t// EC Volume details\n\t\tfunction showEcVolumeDetails(event) {\n\t\t\tconst volumeId = event.target.closest('button').getAttribute('data-volume-id');\n\t\t\twindow.location.href = `/storage/ec-volumes/${volumeId}`;\n\t\t}\n\n\t\t// Repair EC Volume\n\t\tfunction repairEcVolume(event) {\n\t\t\tconst volumeId = event.target.closest('button').getAttribute('data-volume-id');\n\t\t\tif (confirm(`Are you sure you want to repair missing shards for EC volume ${volumeId}?`)) {\n\t\t\t\t// TODO: Implement repair functionality\n\t\t\t\talert('Repair functionality will be implemented soon.');\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "<script>\n\t\t// Sorting functionality\n\t\tfunction sortBy(field) {\n\t\t\tconst currentSort = new URLSearchParams(window.location.search).get('sort_by');\n\t\t\tconst currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';\n\t\t\t\n\t\t\tlet newOrder = 'asc';\n\t\t\tif (currentSort === field && currentOrder === 'asc') {\n\t\t\t\tnewOrder = 'desc';\n\t\t\t}\n\t\t\t\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set('sort_by', field);\n\t\t\turl.searchParams.set('sort_order', newOrder);\n\t\t\turl.searchParams.set('page', '1'); // Reset to first page\n\t\t\twindow.location.href = url.toString();\n\t\t}\n\n\t\t// Pagination functionality\n\t\tfunction goToPage(event) {\n\t\t\tevent.preventDefault();\n\t\t\tconst page = event.target.closest('a').getAttribute('data-page');\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set('page', page);\n\t\t\twindow.location.href = url.toString();\n\t\t}\n\n\t\t// Page size functionality\n\t\tfunction changePageSize(newPageSize) {\n\t\t\tconst url = new URL(window.location);\n\t\t\turl.searchParams.set('page_size', newPageSize);\n\t\t\turl.searchParams.set('page', '1'); // Reset to first page when changing page size\n\t\t\twindow.location.href = url.toString();\n\t\t}\n\n\t\t// Volume details\n\t\tfunction showVolumeDetails(event) {\n\t\t\tconst volumeId = event.target.closest('button').getAttribute('data-volume-id');\n\t\t\tconst server = event.target.closest('button').getAttribute('data-server');\n\t\t\twindow.location.href = `/storage/volumes/${volumeId}/${server}`;\n\t\t}\n\n\t\t// EC Volume details\n\t\tfunction showEcVolumeDetails(event) {\n\t\t\tconst volumeId = event.target.closest('button').getAttribute('data-volume-id');\n\t\t\twindow.location.href = `/storage/ec-volumes/${volumeId}`;\n\t\t}\n\n\t\t// Repair EC Volume\n\t\tfunction repairEcVolume(event) {\n\t\t\tconst volumeId = event.target.closest('button').getAttribute('data-volume-id');\n   showConfirm(`Are you sure you want to repair missing shards for EC volume ${volumeId}?`, function() {\n\t\t\t\t// TODO: Implement repair functionality\n\t\t\t\talert('Repair functionality will be implemented soon.');\n\t\t\t});\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/file_browser.templ b/weed/admin/view/app/file_browser.templ
index 6ae00b81b..a88f00488 100644
--- a/weed/admin/view/app/file_browser.templ
+++ b/weed/admin/view/app/file_browser.templ
@@ -365,9 +365,9 @@ templ FileBrowser(data dash.FileBrowserData) {
 					showFileProperties(path);
 					break;
 				case 'delete':
-					if (confirm('Are you sure you want to delete "' + path + '"?')) {
+					showDeleteConfirm(path, function() {
 						deleteFile(path);
-					}
+					}, 'Are you sure you want to delete this file?');
 					break;
 			}
 		});
diff --git a/weed/admin/view/app/file_browser_templ.go b/weed/admin/view/app/file_browser_templ.go
index 4a66ff026..ca787195c 100644
--- a/weed/admin/view/app/file_browser_templ.go
+++ b/weed/admin/view/app/file_browser_templ.go
@@ -700,7 +700,7 @@ func FileBrowser(data dash.FileBrowserData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "\"><!-- File List Preview --><div id=\"fileListPreview\" class=\"mb-3\" style=\"display: none;\"><label class=\"form-label\">Selected Files:</label><div id=\"selectedFilesList\" class=\"border rounded p-2 bg-light\"><!-- Files will be listed here --></div></div><!-- Upload Progress --><div class=\"mb-3\" id=\"uploadProgress\" style=\"display: none;\"><label class=\"form-label\">Upload Progress:</label><div class=\"progress mb-2\"><div class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\">0%</div></div><div id=\"uploadStatus\" class=\"small text-muted\">Preparing upload...</div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"submitUploadFile()\"><i class=\"fas fa-upload me-1\"></i>Upload Files</button></div></div></div></div><!-- JavaScript for file browser functionality --><script>\n\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t// Format permissions in the main table\n\t\tdocument.querySelectorAll('.permissions-display').forEach(element => {\n\t\t\tconst mode = element.getAttribute('data-mode');\n\t\t\tconst isDirectory = element.getAttribute('data-is-directory') === 'true';\n\t\t\tif (mode) {\n\t\t\t\telement.textContent = formatPermissions(mode, isDirectory);\n\t\t\t}\n\t\t});\n\t\t\n\t\t// Handle file browser action buttons (download, view, properties, delete)\n\t\tdocument.addEventListener('click', function(e) {\n\t\t\tconst button = e.target.closest('[data-action]');\n\t\t\tif (!button) return;\n\t\t\t\n\t\t\tconst action = button.getAttribute('data-action');\n\t\t\tconst path = button.getAttribute('data-path');\n\t\t\t\n\t\t\tif (!path) return;\n\t\t\t\n\t\t\tswitch(action) {\n\t\t\t\tcase 'download':\n\t\t\t\t\tdownloadFile(path);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'view':\n\t\t\t\t\tviewFile(path);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'properties':\n\t\t\t\t\tshowFileProperties(path);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'delete':\n\t\t\t\t\tif (confirm('Are you sure you want to delete \"' + path + '\"?')) {\n\t\t\t\t\t\tdeleteFile(path);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\t\t\n\t\t// Initialize file manager event handlers from admin.js\n\t\tif (typeof setupFileManagerEventHandlers === 'function') {\n\t\t\tsetupFileManagerEventHandlers();\n\t\t}\n\t});\n\t\n\t// File browser specific functions\n\tfunction downloadFile(path) {\n\t\t// Open download URL in new tab\n\t\twindow.open('/api/files/download?path=' + encodeURIComponent(path), '_blank');\n\t}\n\t\n\tfunction viewFile(path) {\n\t\t// Open file viewer in new tab\n\t\twindow.open('/api/files/view?path=' + encodeURIComponent(path), '_blank');\n\t}\n\t\n\tfunction showFileProperties(path) {\n\t\t// Fetch file properties and show in modal\n\t\tfetch('/api/files/properties?path=' + encodeURIComponent(path))\n\t\t\t.then(response => response.json())\n\t\t\t.then(data => {\n\t\t\t\tif (data.error) {\n\t\t\t\t\talert('Error loading file properties: ' + data.error);\n\t\t\t\t} else {\n\t\t\t\t\tdisplayFileProperties(data);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(error => {\n\t\t\t\tconsole.error('Error fetching file properties:', error);\n\t\t\t\talert('Error loading file properties: ' + error.message);\n\t\t\t});\n\t}\n\t\n\tfunction displayFileProperties(data) {\n\t\t// Create a comprehensive modal for file properties\n\t\tconst modalHtml = '<div class=\"modal fade\" id=\"filePropertiesModal\" tabindex=\"-1\">' +\n\t\t\t'<div class=\"modal-dialog modal-lg\">' +\n\t\t\t'<div class=\"modal-content\">' +\n\t\t\t'<div class=\"modal-header\">' +\n\t\t\t'<h5 class=\"modal-title\"><i class=\"fas fa-info-circle me-2\"></i>Properties: ' + (data.name || 'Unknown') + '</h5>' +\n\t\t\t'<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>' +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"modal-body\">' +\n\t\t\tcreateFilePropertiesContent(data) +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"modal-footer\">' +\n\t\t\t'<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>' +\n\t\t\t'</div>' +\n\t\t\t'</div>' +\n\t\t\t'</div>' +\n\t\t\t'</div>';\n\t\t\n\t\t// Remove existing modal if present\n\t\tconst existingModal = document.getElementById('filePropertiesModal');\n\t\tif (existingModal) {\n\t\t\texistingModal.remove();\n\t\t}\n\t\t\n\t\t// Add modal to body and show\n\t\tdocument.body.insertAdjacentHTML('beforeend', modalHtml);\n\t\tconst modal = new bootstrap.Modal(document.getElementById('filePropertiesModal'));\n\t\tmodal.show();\n\t\t\n\t\t// Remove modal when hidden\n\t\tdocument.getElementById('filePropertiesModal').addEventListener('hidden.bs.modal', function() {\n\t\t\tthis.remove();\n\t\t});\n\t}\n\t\n\tfunction createFilePropertiesContent(data) {\n\t\tlet html = '<div class=\"row\">' +\n\t\t\t'<div class=\"col-12\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-file me-1\"></i>Basic Information</h6>' +\n\t\t\t'<table class=\"table table-sm\">' +\n\t\t\t'<tr><td style=\"width: 120px;\"><strong>Name:</strong></td><td>' + (data.name || 'N/A') + '</td></tr>' +\n\t\t\t'<tr><td><strong>Full Path:</strong></td><td><code class=\"text-break\">' + (data.full_path || 'N/A') + '</code></td></tr>' +\n\t\t\t'<tr><td><strong>Type:</strong></td><td>' + (data.is_directory ? 'Directory' : 'File') + '</td></tr>';\n\t\t\n\t\tif (!data.is_directory) {\n\t\t\thtml += '<tr><td><strong>Size:</strong></td><td>' + (data.size_formatted || (data.size ? formatBytes(data.size) : 'N/A')) + '</td></tr>' +\n\t\t\t\t'<tr><td><strong>MIME Type:</strong></td><td>' + (data.mime_type || 'N/A') + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"row\">' +\n\t\t\t'<div class=\"col-md-6\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-clock me-1\"></i>Timestamps</h6>' +\n\t\t\t'<table class=\"table table-sm\">';\n\t\t\n\t\tif (data.modified_time) {\n\t\t\thtml += '<tr><td><strong>Modified:</strong></td><td>' + data.modified_time + '</td></tr>';\n\t\t}\n\t\tif (data.created_time) {\n\t\t\thtml += '<tr><td><strong>Created:</strong></td><td>' + data.created_time + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"col-md-6\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-shield-alt me-1\"></i>Permissions</h6>' +\n\t\t\t'<table class=\"table table-sm\">';\n\t\t\n\t\tif (data.file_mode) {\n\t\t\tconst rwxPermissions = formatPermissions(data.file_mode, data.is_directory);\n\t\t\thtml += '<tr><td><strong>Permissions:</strong></td><td><code>' + rwxPermissions + '</code></td></tr>';\n\t\t}\n\t\tif (data.uid !== undefined) {\n\t\t\thtml += '<tr><td><strong>User ID:</strong></td><td>' + data.uid + '</td></tr>';\n\t\t}\n\t\tif (data.gid !== undefined) {\n\t\t\thtml += '<tr><td><strong>Group ID:</strong></td><td>' + data.gid + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'</div>';\n\t\t\n\t\t// Add advanced info\n\t\thtml += '<div class=\"row\">' +\n\t\t\t'<div class=\"col-12\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-cog me-1\"></i>Advanced</h6>' +\n\t\t\t'<table class=\"table table-sm\">';\n\t\t\n\t\tif (data.chunk_count) {\n\t\t\thtml += '<tr><td style=\"width: 120px;\"><strong>Chunks:</strong></td><td>' + data.chunk_count + '</td></tr>';\n\t\t}\n\t\tif (data.ttl_formatted) {\n\t\t\thtml += '<tr><td><strong>TTL:</strong></td><td>' + data.ttl_formatted + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'</div>';\n\t\t\n\t\t// Add chunk details if available (show top 5)\n\t\tif (data.chunks && data.chunks.length > 0) {\n\t\t\tconst chunksToShow = data.chunks.slice(0, 5);\n\t\t\thtml += '<div class=\"row mt-3\">' +\n\t\t\t\t'<div class=\"col-12\">' +\n\t\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-puzzle-piece me-1\"></i>Chunk Details' +\n\t\t\t\t(data.chunk_count > 5 ? ' (Top 5 of ' + data.chunk_count + ')' : ' (' + data.chunk_count + ')') +\n\t\t\t\t'</h6>' +\n\t\t\t\t'<div class=\"table-responsive\" style=\"max-height: 200px; overflow-y: auto;\">' +\n\t\t\t\t'<table class=\"table table-sm table-striped\">' +\n\t\t\t\t'<thead>' +\n\t\t\t\t'<tr>' +\n\t\t\t\t'<th>File ID</th>' +\n\t\t\t\t'<th>Offset</th>' +\n\t\t\t\t'<th>Size</th>' +\n\t\t\t\t'<th>ETag</th>' +\n\t\t\t\t'</tr>' +\n\t\t\t\t'</thead>' +\n\t\t\t\t'<tbody>';\n\t\t\t\n\t\t\tchunksToShow.forEach(chunk => {\n\t\t\t\thtml += '<tr>' +\n\t\t\t\t\t'<td><code class=\"small\">' + (chunk.file_id || 'N/A') + '</code></td>' +\n\t\t\t\t\t'<td>' + formatBytes(chunk.offset || 0) + '</td>' +\n\t\t\t\t\t'<td>' + formatBytes(chunk.size || 0) + '</td>' +\n\t\t\t\t\t'<td><code class=\"small\">' + (chunk.e_tag || 'N/A') + '</code></td>' +\n\t\t\t\t\t'</tr>';\n\t\t\t});\n\t\t\t\n\t\t\thtml += '</tbody>' +\n\t\t\t\t'</table>' +\n\t\t\t\t'</div>' +\n\t\t\t\t'</div>' +\n\t\t\t\t'</div>';\n\t\t}\n\t\t\n\t\t// Add extended attributes if present\n\t\tif (data.extended && Object.keys(data.extended).length > 0) {\n\t\t\thtml += '<div class=\"row\">' +\n\t\t\t\t'<div class=\"col-12\">' +\n\t\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-tags me-1\"></i>Extended Attributes</h6>' +\n\t\t\t\t'<table class=\"table table-sm\">';\n\t\t\t\n\t\t\tfor (const [key, value] of Object.entries(data.extended)) {\n\t\t\t\thtml += '<tr><td><strong>' + key + ':</strong></td><td>' + value + '</td></tr>';\n\t\t\t}\n\t\t\t\n\t\t\thtml += '</table>' +\n\t\t\t\t'</div>' +\n\t\t\t\t'</div>';\n\t\t}\n\t\t\n\t\treturn html;\n\t}\n\t\n\tfunction uploadFile() {\n\t\tconst modal = new bootstrap.Modal(document.getElementById('uploadFileModal'));\n\t\tmodal.show();\n\t}\n\t\n\tfunction toggleSelectAll() {\n\t\tconst selectAllCheckbox = document.getElementById('selectAll');\n\t\tconst checkboxes = document.querySelectorAll('.file-checkbox');\n\t\t\n\t\tcheckboxes.forEach(checkbox => {\n\t\t\tcheckbox.checked = selectAllCheckbox.checked;\n\t\t});\n\t\t\n\t\tupdateDeleteSelectedButton();\n\t}\n\t\n\tfunction updateDeleteSelectedButton() {\n\t\tconst checkboxes = document.querySelectorAll('.file-checkbox:checked');\n\t\tconst deleteBtn = document.getElementById('deleteSelectedBtn');\n\t\t\n\t\tif (checkboxes.length > 0) {\n\t\t\tdeleteBtn.style.display = 'inline-block';\n\t\t} else {\n\t\t\tdeleteBtn.style.display = 'none';\n\t\t}\n\t}\n\t\n\t// Helper function to format bytes\n\tfunction formatBytes(bytes) {\n\t\tif (bytes === 0) return '0 Bytes';\n\t\tconst k = 1024;\n\t\tconst sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n\t\tconst i = Math.floor(Math.log(bytes) / Math.log(k));\n\t\treturn parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n\t}\n\t\n\t// Helper function to format permissions in rwxrwxrwx format\n\tfunction formatPermissions(mode, isDirectory) {\n\t\t// Check if mode is already in rwxrwxrwx format (e.g., \"drwxr-xr-x\" or \"-rw-r--r--\")\n\t\tif (mode && (mode.startsWith('d') || mode.startsWith('-') || mode.startsWith('l')) && mode.length === 10) {\n\t\t\treturn mode; // Already formatted\n\t\t}\n\t\t\n\t\t// Convert to number - could be octal string or decimal\n\t\tlet permissions;\n\t\tif (typeof mode === 'string') {\n\t\t\t// Try parsing as octal first, then decimal\n\t\t\tif (mode.startsWith('0') && mode.length <= 4) {\n\t\t\t\tpermissions = parseInt(mode, 8);\n\t\t\t} else {\n\t\t\t\tpermissions = parseInt(mode, 10);\n\t\t\t}\n\t\t} else {\n\t\t\tpermissions = parseInt(mode, 10);\n\t\t}\n\t\t\n\t\tif (isNaN(permissions)) {\n\t\t\treturn isDirectory ? 'drwxr-xr-x' : '-rw-r--r--'; // Default fallback\n\t\t}\n\t\t\n\t\t// Handle Go's os.ModeDir conversion\n\t\t// Go's os.ModeDir is 0x80000000 (2147483648), but Unix S_IFDIR is 0o40000 (16384)\n\t\tlet fileType = '-';\n\t\t\n\t\t// Check for Go's os.ModeDir flag\n\t\tif (permissions & 0x80000000) {\n\t\t\tfileType = 'd';\n\t\t}\n\t\t// Check for standard Unix file type bits\n\t\telse if ((permissions & 0xF000) === 0x4000) { // S_IFDIR (0o40000)\n\t\t\tfileType = 'd';\n\t\t} else if ((permissions & 0xF000) === 0x8000) { // S_IFREG (0o100000)\n\t\t\tfileType = '-';\n\t\t} else if ((permissions & 0xF000) === 0xA000) { // S_IFLNK (0o120000)\n\t\t\tfileType = 'l';\n\t\t} else if ((permissions & 0xF000) === 0x2000) { // S_IFCHR (0o020000)\n\t\t\tfileType = 'c';\n\t\t} else if ((permissions & 0xF000) === 0x6000) { // S_IFBLK (0o060000)\n\t\t\tfileType = 'b';\n\t\t} else if ((permissions & 0xF000) === 0x1000) { // S_IFIFO (0o010000)\n\t\t\tfileType = 'p';\n\t\t} else if ((permissions & 0xF000) === 0xC000) { // S_IFSOCK (0o140000)\n\t\t\tfileType = 's';\n\t\t}\n\t\t// Fallback to isDirectory parameter if file type detection fails\n\t\telse if (isDirectory) {\n\t\t\tfileType = 'd';\n\t\t}\n\t\t\n\t\t// Permission bits (always use the lower 12 bits for permissions)\n\t\tconst owner = (permissions >> 6) & 7;\n\t\tconst group = (permissions >> 3) & 7;\n\t\tconst others = permissions & 7;\n\t\t\n\t\t// Convert number to rwx format\n\t\tfunction numToRwx(num) {\n\t\t\tconst r = (num & 4) ? 'r' : '-';\n\t\t\tconst w = (num & 2) ? 'w' : '-';\n\t\t\tconst x = (num & 1) ? 'x' : '-';\n\t\t\treturn r + w + x;\n\t\t}\n\t\t\n\t\treturn fileType + numToRwx(owner) + numToRwx(group) + numToRwx(others);\n\t}\n\t\n\tfunction exportFileList() {\n\t\t// Simple CSV export of file list\n\t\tconst rows = Array.from(document.querySelectorAll('#fileTable tbody tr')).map(row => {\n\t\t\tconst cells = row.querySelectorAll('td');\n\t\t\tif (cells.length > 1) {\n\t\t\t\treturn {\n\t\t\t\t\tname: cells[1].textContent.trim(),\n\t\t\t\t\tsize: cells[2].textContent.trim(),\n\t\t\t\t\ttype: cells[3].textContent.trim(),\n\t\t\t\t\tmodified: cells[4].textContent.trim(),\n\t\t\t\t\tpermissions: cells[5].textContent.trim()\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn null;\n\t\t}).filter(row => row !== null);\n\t\t\n\t\tconst csvContent = \"data:text/csv;charset=utf-8,\" + \n\t\t\t\"Name,Size,Type,Modified,Permissions\\n\" +\n\t\t\trows.map(r => '\"' + r.name + '\",\"' + r.size + '\",\"' + r.type + '\",\"' + r.modified + '\",\"' + r.permissions + '\"').join(\"\\n\");\n\t\t\n\t\tconst encodedUri = encodeURI(csvContent);\n\t\tconst link = document.createElement(\"a\");\n\t\tlink.setAttribute(\"href\", encodedUri);\n\t\tlink.setAttribute(\"download\", \"files.csv\");\n\t\tdocument.body.appendChild(link);\n\t\tlink.click();\n\t\tdocument.body.removeChild(link);\n\t}\n\t\n\t// Handle file checkbox changes\n\tdocument.addEventListener('change', function(e) {\n\t\tif (e.target.classList.contains('file-checkbox')) {\n\t\t\tupdateDeleteSelectedButton();\n\t\t}\n\t});\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "\"><!-- File List Preview --><div id=\"fileListPreview\" class=\"mb-3\" style=\"display: none;\"><label class=\"form-label\">Selected Files:</label><div id=\"selectedFilesList\" class=\"border rounded p-2 bg-light\"><!-- Files will be listed here --></div></div><!-- Upload Progress --><div class=\"mb-3\" id=\"uploadProgress\" style=\"display: none;\"><label class=\"form-label\">Upload Progress:</label><div class=\"progress mb-2\"><div class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\">0%</div></div><div id=\"uploadStatus\" class=\"small text-muted\">Preparing upload...</div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"submitUploadFile()\"><i class=\"fas fa-upload me-1\"></i>Upload Files</button></div></div></div></div><!-- JavaScript for file browser functionality --><script>\n\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t// Format permissions in the main table\n\t\tdocument.querySelectorAll('.permissions-display').forEach(element => {\n\t\t\tconst mode = element.getAttribute('data-mode');\n\t\t\tconst isDirectory = element.getAttribute('data-is-directory') === 'true';\n\t\t\tif (mode) {\n\t\t\t\telement.textContent = formatPermissions(mode, isDirectory);\n\t\t\t}\n\t\t});\n\t\t\n\t\t// Handle file browser action buttons (download, view, properties, delete)\n\t\tdocument.addEventListener('click', function(e) {\n\t\t\tconst button = e.target.closest('[data-action]');\n\t\t\tif (!button) return;\n\t\t\t\n\t\t\tconst action = button.getAttribute('data-action');\n\t\t\tconst path = button.getAttribute('data-path');\n\t\t\t\n\t\t\tif (!path) return;\n\t\t\t\n\t\t\tswitch(action) {\n\t\t\t\tcase 'download':\n\t\t\t\t\tdownloadFile(path);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'view':\n\t\t\t\t\tviewFile(path);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'properties':\n\t\t\t\t\tshowFileProperties(path);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'delete':\n\t\t\t\t\tshowDeleteConfirm(path, function() {\n\t\t\t\t\t\tdeleteFile(path);\n\t\t\t\t\t}, 'Are you sure you want to delete this file?');\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\t\t\n\t\t// Initialize file manager event handlers from admin.js\n\t\tif (typeof setupFileManagerEventHandlers === 'function') {\n\t\t\tsetupFileManagerEventHandlers();\n\t\t}\n\t});\n\t\n\t// File browser specific functions\n\tfunction downloadFile(path) {\n\t\t// Open download URL in new tab\n\t\twindow.open('/api/files/download?path=' + encodeURIComponent(path), '_blank');\n\t}\n\t\n\tfunction viewFile(path) {\n\t\t// Open file viewer in new tab\n\t\twindow.open('/api/files/view?path=' + encodeURIComponent(path), '_blank');\n\t}\n\t\n\tfunction showFileProperties(path) {\n\t\t// Fetch file properties and show in modal\n\t\tfetch('/api/files/properties?path=' + encodeURIComponent(path))\n\t\t\t.then(response => response.json())\n\t\t\t.then(data => {\n\t\t\t\tif (data.error) {\n\t\t\t\t\talert('Error loading file properties: ' + data.error);\n\t\t\t\t} else {\n\t\t\t\t\tdisplayFileProperties(data);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(error => {\n\t\t\t\tconsole.error('Error fetching file properties:', error);\n\t\t\t\talert('Error loading file properties: ' + error.message);\n\t\t\t});\n\t}\n\t\n\tfunction displayFileProperties(data) {\n\t\t// Create a comprehensive modal for file properties\n\t\tconst modalHtml = '<div class=\"modal fade\" id=\"filePropertiesModal\" tabindex=\"-1\">' +\n\t\t\t'<div class=\"modal-dialog modal-lg\">' +\n\t\t\t'<div class=\"modal-content\">' +\n\t\t\t'<div class=\"modal-header\">' +\n\t\t\t'<h5 class=\"modal-title\"><i class=\"fas fa-info-circle me-2\"></i>Properties: ' + (data.name || 'Unknown') + '</h5>' +\n\t\t\t'<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button>' +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"modal-body\">' +\n\t\t\tcreateFilePropertiesContent(data) +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"modal-footer\">' +\n\t\t\t'<button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>' +\n\t\t\t'</div>' +\n\t\t\t'</div>' +\n\t\t\t'</div>' +\n\t\t\t'</div>';\n\t\t\n\t\t// Remove existing modal if present\n\t\tconst existingModal = document.getElementById('filePropertiesModal');\n\t\tif (existingModal) {\n\t\t\texistingModal.remove();\n\t\t}\n\t\t\n\t\t// Add modal to body and show\n\t\tdocument.body.insertAdjacentHTML('beforeend', modalHtml);\n\t\tconst modal = new bootstrap.Modal(document.getElementById('filePropertiesModal'));\n\t\tmodal.show();\n\t\t\n\t\t// Remove modal when hidden\n\t\tdocument.getElementById('filePropertiesModal').addEventListener('hidden.bs.modal', function() {\n\t\t\tthis.remove();\n\t\t});\n\t}\n\t\n\tfunction createFilePropertiesContent(data) {\n\t\tlet html = '<div class=\"row\">' +\n\t\t\t'<div class=\"col-12\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-file me-1\"></i>Basic Information</h6>' +\n\t\t\t'<table class=\"table table-sm\">' +\n\t\t\t'<tr><td style=\"width: 120px;\"><strong>Name:</strong></td><td>' + (data.name || 'N/A') + '</td></tr>' +\n\t\t\t'<tr><td><strong>Full Path:</strong></td><td><code class=\"text-break\">' + (data.full_path || 'N/A') + '</code></td></tr>' +\n\t\t\t'<tr><td><strong>Type:</strong></td><td>' + (data.is_directory ? 'Directory' : 'File') + '</td></tr>';\n\t\t\n\t\tif (!data.is_directory) {\n\t\t\thtml += '<tr><td><strong>Size:</strong></td><td>' + (data.size_formatted || (data.size ? formatBytes(data.size) : 'N/A')) + '</td></tr>' +\n\t\t\t\t'<tr><td><strong>MIME Type:</strong></td><td>' + (data.mime_type || 'N/A') + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"row\">' +\n\t\t\t'<div class=\"col-md-6\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-clock me-1\"></i>Timestamps</h6>' +\n\t\t\t'<table class=\"table table-sm\">';\n\t\t\n\t\tif (data.modified_time) {\n\t\t\thtml += '<tr><td><strong>Modified:</strong></td><td>' + data.modified_time + '</td></tr>';\n\t\t}\n\t\tif (data.created_time) {\n\t\t\thtml += '<tr><td><strong>Created:</strong></td><td>' + data.created_time + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'<div class=\"col-md-6\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-shield-alt me-1\"></i>Permissions</h6>' +\n\t\t\t'<table class=\"table table-sm\">';\n\t\t\n\t\tif (data.file_mode) {\n\t\t\tconst rwxPermissions = formatPermissions(data.file_mode, data.is_directory);\n\t\t\thtml += '<tr><td><strong>Permissions:</strong></td><td><code>' + rwxPermissions + '</code></td></tr>';\n\t\t}\n\t\tif (data.uid !== undefined) {\n\t\t\thtml += '<tr><td><strong>User ID:</strong></td><td>' + data.uid + '</td></tr>';\n\t\t}\n\t\tif (data.gid !== undefined) {\n\t\t\thtml += '<tr><td><strong>Group ID:</strong></td><td>' + data.gid + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'</div>';\n\t\t\n\t\t// Add advanced info\n\t\thtml += '<div class=\"row\">' +\n\t\t\t'<div class=\"col-12\">' +\n\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-cog me-1\"></i>Advanced</h6>' +\n\t\t\t'<table class=\"table table-sm\">';\n\t\t\n\t\tif (data.chunk_count) {\n\t\t\thtml += '<tr><td style=\"width: 120px;\"><strong>Chunks:</strong></td><td>' + data.chunk_count + '</td></tr>';\n\t\t}\n\t\tif (data.ttl_formatted) {\n\t\t\thtml += '<tr><td><strong>TTL:</strong></td><td>' + data.ttl_formatted + '</td></tr>';\n\t\t}\n\t\t\n\t\thtml += '</table>' +\n\t\t\t'</div>' +\n\t\t\t'</div>';\n\t\t\n\t\t// Add chunk details if available (show top 5)\n\t\tif (data.chunks && data.chunks.length > 0) {\n\t\t\tconst chunksToShow = data.chunks.slice(0, 5);\n\t\t\thtml += '<div class=\"row mt-3\">' +\n\t\t\t\t'<div class=\"col-12\">' +\n\t\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-puzzle-piece me-1\"></i>Chunk Details' +\n\t\t\t\t(data.chunk_count > 5 ? ' (Top 5 of ' + data.chunk_count + ')' : ' (' + data.chunk_count + ')') +\n\t\t\t\t'</h6>' +\n\t\t\t\t'<div class=\"table-responsive\" style=\"max-height: 200px; overflow-y: auto;\">' +\n\t\t\t\t'<table class=\"table table-sm table-striped\">' +\n\t\t\t\t'<thead>' +\n\t\t\t\t'<tr>' +\n\t\t\t\t'<th>File ID</th>' +\n\t\t\t\t'<th>Offset</th>' +\n\t\t\t\t'<th>Size</th>' +\n\t\t\t\t'<th>ETag</th>' +\n\t\t\t\t'</tr>' +\n\t\t\t\t'</thead>' +\n\t\t\t\t'<tbody>';\n\t\t\t\n\t\t\tchunksToShow.forEach(chunk => {\n\t\t\t\thtml += '<tr>' +\n\t\t\t\t\t'<td><code class=\"small\">' + (chunk.file_id || 'N/A') + '</code></td>' +\n\t\t\t\t\t'<td>' + formatBytes(chunk.offset || 0) + '</td>' +\n\t\t\t\t\t'<td>' + formatBytes(chunk.size || 0) + '</td>' +\n\t\t\t\t\t'<td><code class=\"small\">' + (chunk.e_tag || 'N/A') + '</code></td>' +\n\t\t\t\t\t'</tr>';\n\t\t\t});\n\t\t\t\n\t\t\thtml += '</tbody>' +\n\t\t\t\t'</table>' +\n\t\t\t\t'</div>' +\n\t\t\t\t'</div>' +\n\t\t\t\t'</div>';\n\t\t}\n\t\t\n\t\t// Add extended attributes if present\n\t\tif (data.extended && Object.keys(data.extended).length > 0) {\n\t\t\thtml += '<div class=\"row\">' +\n\t\t\t\t'<div class=\"col-12\">' +\n\t\t\t\t'<h6 class=\"text-primary\"><i class=\"fas fa-tags me-1\"></i>Extended Attributes</h6>' +\n\t\t\t\t'<table class=\"table table-sm\">';\n\t\t\t\n\t\t\tfor (const [key, value] of Object.entries(data.extended)) {\n\t\t\t\thtml += '<tr><td><strong>' + key + ':</strong></td><td>' + value + '</td></tr>';\n\t\t\t}\n\t\t\t\n\t\t\thtml += '</table>' +\n\t\t\t\t'</div>' +\n\t\t\t\t'</div>';\n\t\t}\n\t\t\n\t\treturn html;\n\t}\n\t\n\tfunction uploadFile() {\n\t\tconst modal = new bootstrap.Modal(document.getElementById('uploadFileModal'));\n\t\tmodal.show();\n\t}\n\t\n\tfunction toggleSelectAll() {\n\t\tconst selectAllCheckbox = document.getElementById('selectAll');\n\t\tconst checkboxes = document.querySelectorAll('.file-checkbox');\n\t\t\n\t\tcheckboxes.forEach(checkbox => {\n\t\t\tcheckbox.checked = selectAllCheckbox.checked;\n\t\t});\n\t\t\n\t\tupdateDeleteSelectedButton();\n\t}\n\t\n\tfunction updateDeleteSelectedButton() {\n\t\tconst checkboxes = document.querySelectorAll('.file-checkbox:checked');\n\t\tconst deleteBtn = document.getElementById('deleteSelectedBtn');\n\t\t\n\t\tif (checkboxes.length > 0) {\n\t\t\tdeleteBtn.style.display = 'inline-block';\n\t\t} else {\n\t\t\tdeleteBtn.style.display = 'none';\n\t\t}\n\t}\n\t\n\t// Helper function to format bytes\n\tfunction formatBytes(bytes) {\n\t\tif (bytes === 0) return '0 Bytes';\n\t\tconst k = 1024;\n\t\tconst sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n\t\tconst i = Math.floor(Math.log(bytes) / Math.log(k));\n\t\treturn parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n\t}\n\t\n\t// Helper function to format permissions in rwxrwxrwx format\n\tfunction formatPermissions(mode, isDirectory) {\n\t\t// Check if mode is already in rwxrwxrwx format (e.g., \"drwxr-xr-x\" or \"-rw-r--r--\")\n\t\tif (mode && (mode.startsWith('d') || mode.startsWith('-') || mode.startsWith('l')) && mode.length === 10) {\n\t\t\treturn mode; // Already formatted\n\t\t}\n\t\t\n\t\t// Convert to number - could be octal string or decimal\n\t\tlet permissions;\n\t\tif (typeof mode === 'string') {\n\t\t\t// Try parsing as octal first, then decimal\n\t\t\tif (mode.startsWith('0') && mode.length <= 4) {\n\t\t\t\tpermissions = parseInt(mode, 8);\n\t\t\t} else {\n\t\t\t\tpermissions = parseInt(mode, 10);\n\t\t\t}\n\t\t} else {\n\t\t\tpermissions = parseInt(mode, 10);\n\t\t}\n\t\t\n\t\tif (isNaN(permissions)) {\n\t\t\treturn isDirectory ? 'drwxr-xr-x' : '-rw-r--r--'; // Default fallback\n\t\t}\n\t\t\n\t\t// Handle Go's os.ModeDir conversion\n\t\t// Go's os.ModeDir is 0x80000000 (2147483648), but Unix S_IFDIR is 0o40000 (16384)\n\t\tlet fileType = '-';\n\t\t\n\t\t// Check for Go's os.ModeDir flag\n\t\tif (permissions & 0x80000000) {\n\t\t\tfileType = 'd';\n\t\t}\n\t\t// Check for standard Unix file type bits\n\t\telse if ((permissions & 0xF000) === 0x4000) { // S_IFDIR (0o40000)\n\t\t\tfileType = 'd';\n\t\t} else if ((permissions & 0xF000) === 0x8000) { // S_IFREG (0o100000)\n\t\t\tfileType = '-';\n\t\t} else if ((permissions & 0xF000) === 0xA000) { // S_IFLNK (0o120000)\n\t\t\tfileType = 'l';\n\t\t} else if ((permissions & 0xF000) === 0x2000) { // S_IFCHR (0o020000)\n\t\t\tfileType = 'c';\n\t\t} else if ((permissions & 0xF000) === 0x6000) { // S_IFBLK (0o060000)\n\t\t\tfileType = 'b';\n\t\t} else if ((permissions & 0xF000) === 0x1000) { // S_IFIFO (0o010000)\n\t\t\tfileType = 'p';\n\t\t} else if ((permissions & 0xF000) === 0xC000) { // S_IFSOCK (0o140000)\n\t\t\tfileType = 's';\n\t\t}\n\t\t// Fallback to isDirectory parameter if file type detection fails\n\t\telse if (isDirectory) {\n\t\t\tfileType = 'd';\n\t\t}\n\t\t\n\t\t// Permission bits (always use the lower 12 bits for permissions)\n\t\tconst owner = (permissions >> 6) & 7;\n\t\tconst group = (permissions >> 3) & 7;\n\t\tconst others = permissions & 7;\n\t\t\n\t\t// Convert number to rwx format\n\t\tfunction numToRwx(num) {\n\t\t\tconst r = (num & 4) ? 'r' : '-';\n\t\t\tconst w = (num & 2) ? 'w' : '-';\n\t\t\tconst x = (num & 1) ? 'x' : '-';\n\t\t\treturn r + w + x;\n\t\t}\n\t\t\n\t\treturn fileType + numToRwx(owner) + numToRwx(group) + numToRwx(others);\n\t}\n\t\n\tfunction exportFileList() {\n\t\t// Simple CSV export of file list\n\t\tconst rows = Array.from(document.querySelectorAll('#fileTable tbody tr')).map(row => {\n\t\t\tconst cells = row.querySelectorAll('td');\n\t\t\tif (cells.length > 1) {\n\t\t\t\treturn {\n\t\t\t\t\tname: cells[1].textContent.trim(),\n\t\t\t\t\tsize: cells[2].textContent.trim(),\n\t\t\t\t\ttype: cells[3].textContent.trim(),\n\t\t\t\t\tmodified: cells[4].textContent.trim(),\n\t\t\t\t\tpermissions: cells[5].textContent.trim()\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn null;\n\t\t}).filter(row => row !== null);\n\t\t\n\t\tconst csvContent = \"data:text/csv;charset=utf-8,\" + \n\t\t\t\"Name,Size,Type,Modified,Permissions\\n\" +\n\t\t\trows.map(r => '\"' + r.name + '\",\"' + r.size + '\",\"' + r.type + '\",\"' + r.modified + '\",\"' + r.permissions + '\"').join(\"\\n\");\n\t\t\n\t\tconst encodedUri = encodeURI(csvContent);\n\t\tconst link = document.createElement(\"a\");\n\t\tlink.setAttribute(\"href\", encodedUri);\n\t\tlink.setAttribute(\"download\", \"files.csv\");\n\t\tdocument.body.appendChild(link);\n\t\tlink.click();\n\t\tdocument.body.removeChild(link);\n\t}\n\t\n\t// Handle file checkbox changes\n\tdocument.addEventListener('change', function(e) {\n\t\tif (e.target.classList.contains('file-checkbox')) {\n\t\t\tupdateDeleteSelectedButton();\n\t\t}\n\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/maintenance_config.templ b/weed/admin/view/app/maintenance_config.templ
index 65ef565af..4110486ba 100644
--- a/weed/admin/view/app/maintenance_config.templ
+++ b/weed/admin/view/app/maintenance_config.templ
@@ -251,7 +251,7 @@ templ MaintenanceConfig(data *maintenance.MaintenanceConfigData) {
         }
 
         function resetToDefaults() {
-            if (confirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.')) {
+            showConfirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.', function() {
                 // Reset form to defaults (matching DefaultMaintenanceConfig values)
                 document.getElementById('enabled').checked = false;
                 document.getElementById('scanInterval').value = '30';
@@ -261,7 +261,7 @@ templ MaintenanceConfig(data *maintenance.MaintenanceConfigData) {
                 document.getElementById('maxRetries').value = '3';
                 document.getElementById('retryDelay').value = '15';
                 document.getElementById('taskRetention').value = '7';
-            }
+            });
         }
     </script>
 } 
\ No newline at end of file
diff --git a/weed/admin/view/app/maintenance_config_schema.templ b/weed/admin/view/app/maintenance_config_schema.templ
index ee89cab64..3e1d6ee1f 100644
--- a/weed/admin/view/app/maintenance_config_schema.templ
+++ b/weed/admin/view/app/maintenance_config_schema.templ
@@ -179,7 +179,7 @@ templ MaintenanceConfigSchema(data *maintenance.MaintenanceConfigData, schema *m
         }
 
         function resetToDefaults() {
-            if (confirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.')) {
+            showConfirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.', function() {
                 fetch('/maintenance/config/defaults', {
                     method: 'POST',
                     headers: {
@@ -199,7 +199,7 @@ templ MaintenanceConfigSchema(data *maintenance.MaintenanceConfigData, schema *m
                     console.error('Error:', error);
                     alert('Error resetting configuration: ' + error.message);
                 });
-            }
+            });
         }
     </script>
 }
diff --git a/weed/admin/view/app/maintenance_config_schema_templ.go b/weed/admin/view/app/maintenance_config_schema_templ.go
index b7046f3f9..b4d806fb6 100644
--- a/weed/admin/view/app/maintenance_config_schema_templ.go
+++ b/weed/admin/view/app/maintenance_config_schema_templ.go
@@ -46,7 +46,7 @@ func MaintenanceConfigSchema(data *maintenance.MaintenanceConfigData, schema *ma
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"d-flex gap-2\"><button type=\"button\" class=\"btn btn-primary\" onclick=\"saveConfiguration()\"><i class=\"fas fa-save me-1\"></i> Save Configuration</button> <button type=\"button\" class=\"btn btn-secondary\" onclick=\"resetToDefaults()\"><i class=\"fas fa-undo me-1\"></i> Reset to Defaults</button></div></form></div></div></div></div><!-- Task Configuration Cards --><div class=\"row mt-4\"><div class=\"col-md-4\"><div class=\"card\"><div class=\"card-header\"><h5 class=\"mb-0\"><i class=\"fas fa-broom me-2\"></i> Volume Vacuum</h5></div><div class=\"card-body\"><p class=\"card-text\">Reclaims disk space by removing deleted files from volumes.</p><a href=\"/maintenance/config/vacuum\" class=\"btn btn-primary\">Configure</a></div></div></div><div class=\"col-md-4\"><div class=\"card\"><div class=\"card-header\"><h5 class=\"mb-0\"><i class=\"fas fa-balance-scale me-2\"></i> Volume Balance</h5></div><div class=\"card-body\"><p class=\"card-text\">Redistributes volumes across servers to optimize storage utilization.</p><a href=\"/maintenance/config/balance\" class=\"btn btn-primary\">Configure</a></div></div></div><div class=\"col-md-4\"><div class=\"card\"><div class=\"card-header\"><h5 class=\"mb-0\"><i class=\"fas fa-shield-alt me-2\"></i> Erasure Coding</h5></div><div class=\"card-body\"><p class=\"card-text\">Converts volumes to erasure coded format for improved durability.</p><a href=\"/maintenance/config/erasure_coding\" class=\"btn btn-primary\">Configure</a></div></div></div></div></div><script>\n        function saveConfiguration() {\n            const form = document.getElementById('maintenanceConfigForm');\n            const formData = new FormData(form);\n            \n            // Convert form data to JSON, handling interval fields specially\n            const config = {};\n            \n            for (let [key, value] of formData.entries()) {\n                if (key.endsWith('_value')) {\n                    // This is an interval value part\n                    const baseKey = key.replace('_value', '');\n                    const unitKey = baseKey + '_unit';\n                    const unitValue = formData.get(unitKey);\n                    \n                    if (unitValue) {\n                        // Convert to seconds based on unit\n                        const numValue = parseInt(value) || 0;\n                        let seconds = numValue;\n                        switch(unitValue) {\n                            case 'minutes':\n                                seconds = numValue * 60;\n                                break;\n                            case 'hours':\n                                seconds = numValue * 3600;\n                                break;\n                            case 'days':\n                                seconds = numValue * 24 * 3600;\n                                break;\n                        }\n                        config[baseKey] = seconds;\n                    }\n                } else if (key.endsWith('_unit')) {\n                    // Skip unit keys - they're handled with their corresponding value\n                    continue;\n                } else {\n                    // Regular field\n                    if (form.querySelector(`[name=\"${key}\"]`).type === 'checkbox') {\n                        config[key] = form.querySelector(`[name=\"${key}\"]`).checked;\n                    } else {\n                        const numValue = parseFloat(value);\n                        config[key] = isNaN(numValue) ? value : numValue;\n                    }\n                }\n            }\n\n            fetch('/api/maintenance/config', {\n                method: 'PUT',\n                headers: {\n                    'Content-Type': 'application/json',\n                },\n                body: JSON.stringify(config)\n            })\n            .then(response => {\n                if (response.status === 401) {\n                    alert('Authentication required. Please log in first.');\n                    window.location.href = '/login';\n                    return;\n                }\n                return response.json();\n            })\n            .then(data => {\n                if (!data) return; // Skip if redirected to login\n                if (data.success) {\n                    alert('Configuration saved successfully!');\n                    location.reload();\n                } else {\n                    alert('Error saving configuration: ' + (data.error || 'Unknown error'));\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('Error saving configuration: ' + error.message);\n            });\n        }\n\n        function resetToDefaults() {\n            if (confirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.')) {\n                fetch('/maintenance/config/defaults', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        alert('Configuration reset to defaults!');\n                        location.reload();\n                    } else {\n                        alert('Error resetting configuration: ' + (data.error || 'Unknown error'));\n                    }\n                })\n                .catch(error => {\n                    console.error('Error:', error);\n                    alert('Error resetting configuration: ' + error.message);\n                });\n            }\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"d-flex gap-2\"><button type=\"button\" class=\"btn btn-primary\" onclick=\"saveConfiguration()\"><i class=\"fas fa-save me-1\"></i> Save Configuration</button> <button type=\"button\" class=\"btn btn-secondary\" onclick=\"resetToDefaults()\"><i class=\"fas fa-undo me-1\"></i> Reset to Defaults</button></div></form></div></div></div></div><!-- Task Configuration Cards --><div class=\"row mt-4\"><div class=\"col-md-4\"><div class=\"card\"><div class=\"card-header\"><h5 class=\"mb-0\"><i class=\"fas fa-broom me-2\"></i> Volume Vacuum</h5></div><div class=\"card-body\"><p class=\"card-text\">Reclaims disk space by removing deleted files from volumes.</p><a href=\"/maintenance/config/vacuum\" class=\"btn btn-primary\">Configure</a></div></div></div><div class=\"col-md-4\"><div class=\"card\"><div class=\"card-header\"><h5 class=\"mb-0\"><i class=\"fas fa-balance-scale me-2\"></i> Volume Balance</h5></div><div class=\"card-body\"><p class=\"card-text\">Redistributes volumes across servers to optimize storage utilization.</p><a href=\"/maintenance/config/balance\" class=\"btn btn-primary\">Configure</a></div></div></div><div class=\"col-md-4\"><div class=\"card\"><div class=\"card-header\"><h5 class=\"mb-0\"><i class=\"fas fa-shield-alt me-2\"></i> Erasure Coding</h5></div><div class=\"card-body\"><p class=\"card-text\">Converts volumes to erasure coded format for improved durability.</p><a href=\"/maintenance/config/erasure_coding\" class=\"btn btn-primary\">Configure</a></div></div></div></div></div><script>\n        function saveConfiguration() {\n            const form = document.getElementById('maintenanceConfigForm');\n            const formData = new FormData(form);\n            \n            // Convert form data to JSON, handling interval fields specially\n            const config = {};\n            \n            for (let [key, value] of formData.entries()) {\n                if (key.endsWith('_value')) {\n                    // This is an interval value part\n                    const baseKey = key.replace('_value', '');\n                    const unitKey = baseKey + '_unit';\n                    const unitValue = formData.get(unitKey);\n                    \n                    if (unitValue) {\n                        // Convert to seconds based on unit\n                        const numValue = parseInt(value) || 0;\n                        let seconds = numValue;\n                        switch(unitValue) {\n                            case 'minutes':\n                                seconds = numValue * 60;\n                                break;\n                            case 'hours':\n                                seconds = numValue * 3600;\n                                break;\n                            case 'days':\n                                seconds = numValue * 24 * 3600;\n                                break;\n                        }\n                        config[baseKey] = seconds;\n                    }\n                } else if (key.endsWith('_unit')) {\n                    // Skip unit keys - they're handled with their corresponding value\n                    continue;\n                } else {\n                    // Regular field\n                    if (form.querySelector(`[name=\"${key}\"]`).type === 'checkbox') {\n                        config[key] = form.querySelector(`[name=\"${key}\"]`).checked;\n                    } else {\n                        const numValue = parseFloat(value);\n                        config[key] = isNaN(numValue) ? value : numValue;\n                    }\n                }\n            }\n\n            fetch('/api/maintenance/config', {\n                method: 'PUT',\n                headers: {\n                    'Content-Type': 'application/json',\n                },\n                body: JSON.stringify(config)\n            })\n            .then(response => {\n                if (response.status === 401) {\n                    alert('Authentication required. Please log in first.');\n                    window.location.href = '/login';\n                    return;\n                }\n                return response.json();\n            })\n            .then(data => {\n                if (!data) return; // Skip if redirected to login\n                if (data.success) {\n                    alert('Configuration saved successfully!');\n                    location.reload();\n                } else {\n                    alert('Error saving configuration: ' + (data.error || 'Unknown error'));\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('Error saving configuration: ' + error.message);\n            });\n        }\n\n        function resetToDefaults() {\n            showConfirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.', function() {\n                fetch('/maintenance/config/defaults', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        alert('Configuration reset to defaults!');\n                        location.reload();\n                    } else {\n                        alert('Error resetting configuration: ' + (data.error || 'Unknown error'));\n                    }\n                })\n                .catch(error => {\n                    console.error('Error:', error);\n                    alert('Error resetting configuration: ' + error.message);\n                });\n            });\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/maintenance_config_templ.go b/weed/admin/view/app/maintenance_config_templ.go
index 45e9b8ef1..75017b31d 100644
--- a/weed/admin/view/app/maintenance_config_templ.go
+++ b/weed/admin/view/app/maintenance_config_templ.go
@@ -273,7 +273,7 @@ func MaintenanceConfig(data *maintenance.MaintenanceConfigData) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</p></div></div></div></div></div></div></div></div><script>\n        function saveConfiguration() {\n            // First, get current configuration to preserve existing values\n            fetch('/api/maintenance/config')\n                .then(response => response.json())\n                .then(currentConfig => {\n                    // Update only the fields from the form\n                    const updatedConfig = {\n                        ...currentConfig.config, // Preserve existing config\n                        enabled: document.getElementById('enabled').checked,\n                        scan_interval_seconds: parseInt(document.getElementById('scanInterval').value) * 60, // Convert to seconds\n                        worker_timeout_seconds: parseInt(document.getElementById('workerTimeout').value) * 60, // Convert to seconds\n                        task_timeout_seconds: parseInt(document.getElementById('taskTimeout').value) * 3600, // Convert to seconds\n                        retry_delay_seconds: parseInt(document.getElementById('retryDelay').value) * 60, // Convert to seconds\n                        max_retries: parseInt(document.getElementById('maxRetries').value),\n                        task_retention_seconds: parseInt(document.getElementById('taskRetention').value) * 24 * 3600, // Convert to seconds\n                        policy: {\n                            ...currentConfig.config.policy, // Preserve existing policy\n                            global_max_concurrent: parseInt(document.getElementById('globalMaxConcurrent').value)\n                        }\n                    };\n\n                    // Send the updated configuration\n                    return fetch('/api/maintenance/config', {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application/json',\n                        },\n                        body: JSON.stringify(updatedConfig)\n                    });\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        alert('Configuration saved successfully');\n                        location.reload(); // Reload to show updated values\n                    } else {\n                        alert('Failed to save configuration: ' + (data.error || 'Unknown error'));\n                    }\n                })\n                .catch(error => {\n                    alert('Error: ' + error.message);\n                });\n        }\n\n        function resetToDefaults() {\n            if (confirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.')) {\n                // Reset form to defaults (matching DefaultMaintenanceConfig values)\n                document.getElementById('enabled').checked = false;\n                document.getElementById('scanInterval').value = '30';\n                document.getElementById('workerTimeout').value = '5';\n                document.getElementById('taskTimeout').value = '2';\n                document.getElementById('globalMaxConcurrent').value = '4';\n                document.getElementById('maxRetries').value = '3';\n                document.getElementById('retryDelay').value = '15';\n                document.getElementById('taskRetention').value = '7';\n            }\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</p></div></div></div></div></div></div></div></div><script>\n        function saveConfiguration() {\n            // First, get current configuration to preserve existing values\n            fetch('/api/maintenance/config')\n                .then(response => response.json())\n                .then(currentConfig => {\n                    // Update only the fields from the form\n                    const updatedConfig = {\n                        ...currentConfig.config, // Preserve existing config\n                        enabled: document.getElementById('enabled').checked,\n                        scan_interval_seconds: parseInt(document.getElementById('scanInterval').value) * 60, // Convert to seconds\n                        worker_timeout_seconds: parseInt(document.getElementById('workerTimeout').value) * 60, // Convert to seconds\n                        task_timeout_seconds: parseInt(document.getElementById('taskTimeout').value) * 3600, // Convert to seconds\n                        retry_delay_seconds: parseInt(document.getElementById('retryDelay').value) * 60, // Convert to seconds\n                        max_retries: parseInt(document.getElementById('maxRetries').value),\n                        task_retention_seconds: parseInt(document.getElementById('taskRetention').value) * 24 * 3600, // Convert to seconds\n                        policy: {\n                            ...currentConfig.config.policy, // Preserve existing policy\n                            global_max_concurrent: parseInt(document.getElementById('globalMaxConcurrent').value)\n                        }\n                    };\n\n                    // Send the updated configuration\n                    return fetch('/api/maintenance/config', {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application/json',\n                        },\n                        body: JSON.stringify(updatedConfig)\n                    });\n                })\n                .then(response => response.json())\n                .then(data => {\n                    if (data.success) {\n                        alert('Configuration saved successfully');\n                        location.reload(); // Reload to show updated values\n                    } else {\n                        alert('Failed to save configuration: ' + (data.error || 'Unknown error'));\n                    }\n                })\n                .catch(error => {\n                    alert('Error: ' + error.message);\n                });\n        }\n\n        function resetToDefaults() {\n            showConfirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.', function() {\n                // Reset form to defaults (matching DefaultMaintenanceConfig values)\n                document.getElementById('enabled').checked = false;\n                document.getElementById('scanInterval').value = '30';\n                document.getElementById('workerTimeout').value = '5';\n                document.getElementById('taskTimeout').value = '2';\n                document.getElementById('globalMaxConcurrent').value = '4';\n                document.getElementById('maxRetries').value = '3';\n                document.getElementById('retryDelay').value = '15';\n                document.getElementById('taskRetention').value = '7';\n            });\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/maintenance_workers.templ b/weed/admin/view/app/maintenance_workers.templ
index 00748e550..eb95c0d55 100644
--- a/weed/admin/view/app/maintenance_workers.templ
+++ b/weed/admin/view/app/maintenance_workers.templ
@@ -302,7 +302,7 @@ templ MaintenanceWorkers(data *dash.MaintenanceWorkersData) {
     function pauseWorker(event) {
         const workerID = event.target.closest('button').getAttribute('data-worker-id');
         
-        if (confirm('Are you sure you want to pause this worker?')) {
+        showConfirm('Are you sure you want to pause this worker?', function() {
             fetch('/api/maintenance/workers/' + workerID + '/pause', {
                 method: 'POST'
             })
@@ -318,7 +318,7 @@ templ MaintenanceWorkers(data *dash.MaintenanceWorkersData) {
                 console.error('Error pausing worker:', error);
                 alert('Failed to pause worker');
             });
-        }
+        });
     }
 
     function formatDuration(nanoseconds) {
diff --git a/weed/admin/view/app/maintenance_workers_templ.go b/weed/admin/view/app/maintenance_workers_templ.go
index f1fd13ebb..12378b532 100644
--- a/weed/admin/view/app/maintenance_workers_templ.go
+++ b/weed/admin/view/app/maintenance_workers_templ.go
@@ -390,7 +390,7 @@ func MaintenanceWorkers(data *dash.MaintenanceWorkersData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div></div></div></div></div><!-- Worker Details Modal --><div class=\"modal fade\" id=\"workerDetailsModal\" tabindex=\"-1\" aria-labelledby=\"workerDetailsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"workerDetailsModalLabel\">Worker Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\" id=\"workerDetailsContent\"><!-- Content will be loaded dynamically --></div></div></div></div><script>\n    function showWorkerDetails(event) {\n        const workerID = event.target.closest('button').getAttribute('data-worker-id');\n        \n        // Show modal\n        var modal = new bootstrap.Modal(document.getElementById('workerDetailsModal'));\n        \n        // Load worker details\n        fetch('/api/maintenance/workers/' + workerID)\n            .then(response => response.json())\n            .then(data => {\n                const content = document.getElementById('workerDetailsContent');\n                content.innerHTML = '<div class=\"row\">' +\n                    '<div class=\"col-md-6\">' +\n                        '<h6>Worker Information</h6>' +\n                        '<ul class=\"list-unstyled\">' +\n                            '<li><strong>ID:</strong> ' + data.worker.id + '</li>' +\n                            '<li><strong>Address:</strong> ' + data.worker.address + '</li>' +\n                            '<li><strong>Status:</strong> ' + data.worker.status + '</li>' +\n                            '<li><strong>Max Concurrent:</strong> ' + data.worker.max_concurrent + '</li>' +\n                            '<li><strong>Current Load:</strong> ' + data.worker.current_load + '</li>' +\n                        '</ul>' +\n                    '</div>' +\n                    '<div class=\"col-md-6\">' +\n                        '<h6>Performance Metrics</h6>' +\n                        '<ul class=\"list-unstyled\">' +\n                            '<li><strong>Tasks Completed:</strong> ' + data.performance.tasks_completed + '</li>' +\n                            '<li><strong>Tasks Failed:</strong> ' + data.performance.tasks_failed + '</li>' +\n                            '<li><strong>Success Rate:</strong> ' + data.performance.success_rate.toFixed(1) + '%</li>' +\n                            '<li><strong>Average Task Time:</strong> ' + formatDuration(data.performance.average_task_time) + '</li>' +\n                            '<li><strong>Uptime:</strong> ' + formatDuration(data.performance.uptime) + '</li>' +\n                        '</ul>' +\n                    '</div>' +\n                '</div>' +\n                '<hr>' +\n                '<h6>Current Tasks</h6>' +\n                (data.current_tasks.length === 0 ? \n                    '<p class=\"text-muted\">No current tasks</p>' :\n                    data.current_tasks.map(task => \n                        '<div class=\"card mb-2\">' +\n                            '<div class=\"card-body py-2\">' +\n                                '<div class=\"d-flex justify-content-between\">' +\n                                    '<span><strong>' + task.type + '</strong> - Volume ' + task.volume_id + '</span>' +\n                                    '<span class=\"badge bg-info\">' + task.status + '</span>' +\n                                '</div>' +\n                                '<small class=\"text-muted\">' + task.reason + '</small>' +\n                            '</div>' +\n                        '</div>'\n                    ).join('')\n                );\n                modal.show();\n            })\n            .catch(error => {\n                console.error('Error loading worker details:', error);\n                const content = document.getElementById('workerDetailsContent');\n                content.innerHTML = '<div class=\"alert alert-danger\">Failed to load worker details</div>';\n                modal.show();\n            });\n    }\n\n    function pauseWorker(event) {\n        const workerID = event.target.closest('button').getAttribute('data-worker-id');\n        \n        if (confirm('Are you sure you want to pause this worker?')) {\n            fetch('/api/maintenance/workers/' + workerID + '/pause', {\n                method: 'POST'\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    location.reload();\n                } else {\n                    alert('Failed to pause worker: ' + data.error);\n                }\n            })\n            .catch(error => {\n                console.error('Error pausing worker:', error);\n                alert('Failed to pause worker');\n            });\n        }\n    }\n\n    function formatDuration(nanoseconds) {\n        const seconds = Math.floor(nanoseconds / 1000000000);\n        const minutes = Math.floor(seconds / 60);\n        const hours = Math.floor(minutes / 60);\n        \n        if (hours > 0) {\n            return hours + 'h ' + (minutes % 60) + 'm';\n        } else if (minutes > 0) {\n            return minutes + 'm ' + (seconds % 60) + 's';\n        } else {\n            return seconds + 's';\n        }\n    }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div></div></div></div></div><!-- Worker Details Modal --><div class=\"modal fade\" id=\"workerDetailsModal\" tabindex=\"-1\" aria-labelledby=\"workerDetailsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"workerDetailsModalLabel\">Worker Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\" id=\"workerDetailsContent\"><!-- Content will be loaded dynamically --></div></div></div></div><script>\n    function showWorkerDetails(event) {\n        const workerID = event.target.closest('button').getAttribute('data-worker-id');\n        \n        // Show modal\n        var modal = new bootstrap.Modal(document.getElementById('workerDetailsModal'));\n        \n        // Load worker details\n        fetch('/api/maintenance/workers/' + workerID)\n            .then(response => response.json())\n            .then(data => {\n                const content = document.getElementById('workerDetailsContent');\n                content.innerHTML = '<div class=\"row\">' +\n                    '<div class=\"col-md-6\">' +\n                        '<h6>Worker Information</h6>' +\n                        '<ul class=\"list-unstyled\">' +\n                            '<li><strong>ID:</strong> ' + data.worker.id + '</li>' +\n                            '<li><strong>Address:</strong> ' + data.worker.address + '</li>' +\n                            '<li><strong>Status:</strong> ' + data.worker.status + '</li>' +\n                            '<li><strong>Max Concurrent:</strong> ' + data.worker.max_concurrent + '</li>' +\n                            '<li><strong>Current Load:</strong> ' + data.worker.current_load + '</li>' +\n                        '</ul>' +\n                    '</div>' +\n                    '<div class=\"col-md-6\">' +\n                        '<h6>Performance Metrics</h6>' +\n                        '<ul class=\"list-unstyled\">' +\n                            '<li><strong>Tasks Completed:</strong> ' + data.performance.tasks_completed + '</li>' +\n                            '<li><strong>Tasks Failed:</strong> ' + data.performance.tasks_failed + '</li>' +\n                            '<li><strong>Success Rate:</strong> ' + data.performance.success_rate.toFixed(1) + '%</li>' +\n                            '<li><strong>Average Task Time:</strong> ' + formatDuration(data.performance.average_task_time) + '</li>' +\n                            '<li><strong>Uptime:</strong> ' + formatDuration(data.performance.uptime) + '</li>' +\n                        '</ul>' +\n                    '</div>' +\n                '</div>' +\n                '<hr>' +\n                '<h6>Current Tasks</h6>' +\n                (data.current_tasks.length === 0 ? \n                    '<p class=\"text-muted\">No current tasks</p>' :\n                    data.current_tasks.map(task => \n                        '<div class=\"card mb-2\">' +\n                            '<div class=\"card-body py-2\">' +\n                                '<div class=\"d-flex justify-content-between\">' +\n                                    '<span><strong>' + task.type + '</strong> - Volume ' + task.volume_id + '</span>' +\n                                    '<span class=\"badge bg-info\">' + task.status + '</span>' +\n                                '</div>' +\n                                '<small class=\"text-muted\">' + task.reason + '</small>' +\n                            '</div>' +\n                        '</div>'\n                    ).join('')\n                );\n                modal.show();\n            })\n            .catch(error => {\n                console.error('Error loading worker details:', error);\n                const content = document.getElementById('workerDetailsContent');\n                content.innerHTML = '<div class=\"alert alert-danger\">Failed to load worker details</div>';\n                modal.show();\n            });\n    }\n\n    function pauseWorker(event) {\n        const workerID = event.target.closest('button').getAttribute('data-worker-id');\n        \n        showConfirm('Are you sure you want to pause this worker?', function() {\n            fetch('/api/maintenance/workers/' + workerID + '/pause', {\n                method: 'POST'\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    location.reload();\n                } else {\n                    alert('Failed to pause worker: ' + data.error);\n                }\n            })\n            .catch(error => {\n                console.error('Error pausing worker:', error);\n                alert('Failed to pause worker');\n            });\n        });\n    }\n\n    function formatDuration(nanoseconds) {\n        const seconds = Math.floor(nanoseconds / 1000000000);\n        const minutes = Math.floor(seconds / 60);\n        const hours = Math.floor(minutes / 60);\n        \n        if (hours > 0) {\n            return hours + 'h ' + (minutes % 60) + 'm';\n        } else if (minutes > 0) {\n            return minutes + 'm ' + (seconds % 60) + 's';\n        } else {\n            return seconds + 's';\n        }\n    }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/object_store_users.templ b/weed/admin/view/app/object_store_users.templ
index b3b7d92de..3e8766196 100644
--- a/weed/admin/view/app/object_store_users.templ
+++ b/weed/admin/view/app/object_store_users.templ
@@ -802,7 +802,7 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
 
         // Delete user function
         async function deleteUser(username) {
-            if (confirm(`Are you sure you want to delete user "${username}"? This action cannot be undone.`)) {
+            showDeleteConfirm(username, async function() {
                 try {
                     const response = await fetch(`/api/users/${username}`, {
                         method: 'DELETE'
@@ -819,7 +819,7 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
                     console.error('Error deleting user:', error);
                     showErrorMessage('Failed to delete user: ' + error.message);
                 }
-            }
+            }, 'Are you sure you want to delete this user? This action cannot be undone.');
         }
 
         // Handle create user form submission
@@ -1102,7 +1102,7 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
 
         // Delete access key
         async function deleteAccessKey(username, accessKey) {
-            if (confirm('Are you sure you want to delete this access key?')) {
+            showDeleteConfirm(accessKey, async function() {
                 try {
                     const response = await fetch(`/api/users/${username}/access-keys/${accessKey}`, {
                         method: 'DELETE'
@@ -1121,7 +1121,7 @@ templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
                     console.error('Error deleting access key:', error);
                     showErrorMessage('Failed to delete access key: ' + error.message);
                 }
-            }
+            }, 'Are you sure you want to delete this access key?');
         }
 
 
diff --git a/weed/admin/view/app/object_store_users_templ.go b/weed/admin/view/app/object_store_users_templ.go
index f03337207..06b774814 100644
--- a/weed/admin/view/app/object_store_users_templ.go
+++ b/weed/admin/view/app/object_store_users_templ.go
@@ -193,7 +193,7 @@ func ObjectStoreUsers(data dash.ObjectStoreUsersData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</small></div></div></div><!-- Create User Modal --><div class=\"modal fade\" id=\"createUserModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-user-plus me-2\"></i>Create New User</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><form id=\"createUserForm\"><div class=\"mb-3\"><label for=\"username\" class=\"form-label\">Username *</label> <input type=\"text\" class=\"form-control\" id=\"username\" name=\"username\" required></div><div class=\"mb-3\"><label for=\"email\" class=\"form-label\">Email</label> <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\"></div><div class=\"mb-3\"><label for=\"actions\" class=\"form-label\">Permissions</label> <select multiple class=\"form-control\" id=\"actions\" name=\"actions\" size=\"10\"><option value=\"Admin\">Admin (Full Access)</option> <option value=\"Read\">Read</option> <option value=\"Write\">Write</option> <option value=\"List\">List</option> <option value=\"Tagging\">Tagging</option> <optgroup label=\"Object Lock Permissions\"><option value=\"BypassGovernanceRetention\">Bypass Governance Retention</option> <option value=\"GetObjectRetention\">Get Object Retention</option> <option value=\"PutObjectRetention\">Put Object Retention</option> <option value=\"GetObjectLegalHold\">Get Object Legal Hold</option> <option value=\"PutObjectLegalHold\">Put Object Legal Hold</option> <option value=\"GetBucketObjectLockConfiguration\">Get Bucket Object Lock Configuration</option> <option value=\"PutBucketObjectLockConfiguration\">Put Bucket Object Lock Configuration</option></optgroup></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple permissions</small></div><div class=\"mb-3\"><label class=\"form-label\">Bucket Scope</label> <small class=\"form-text text-muted d-block mb-2\">Apply selected permissions to specific buckets or all buckets</small><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"bucketScope\" id=\"allBuckets\" value=\"all\" checked onchange=\"toggleBucketList()\"> <label class=\"form-check-label\" for=\"allBuckets\">All Buckets</label></div><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"bucketScope\" id=\"specificBuckets\" value=\"specific\" onchange=\"toggleBucketList()\"> <label class=\"form-check-label\" for=\"specificBuckets\">Specific Buckets</label></div><div id=\"bucketSelectionList\" class=\"mt-2\" style=\"display: none;\"><select multiple class=\"form-select\" id=\"selectedBuckets\" size=\"5\"><!-- Options loaded dynamically --></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple buckets</small></div></div><div class=\"mb-3\"><label for=\"policies\" class=\"form-label\">Attached Policies</label> <select multiple class=\"form-control\" id=\"policies\" name=\"policies\" size=\"5\"><!-- Options loaded dynamically --></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple policies</small></div><div class=\"mb-3 form-check\"><input type=\"checkbox\" class=\"form-check-input\" id=\"generateKey\" name=\"generateKey\" checked> <label class=\"form-check-label\" for=\"generateKey\">Generate access key automatically</label></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleCreateUser()\">Create User</button></div></div></div></div><!-- Edit User Modal --><div class=\"modal fade\" id=\"editUserModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-user-edit me-2\"></i>Edit User</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><form id=\"editUserForm\"><input type=\"hidden\" id=\"editUsername\" name=\"username\"><div class=\"mb-3\"><label for=\"editEmail\" class=\"form-label\">Email</label> <input type=\"email\" class=\"form-control\" id=\"editEmail\" name=\"email\"></div><div class=\"mb-3\"><label for=\"editActions\" class=\"form-label\">Permissions</label> <select multiple class=\"form-control\" id=\"editActions\" name=\"actions\" size=\"10\"><option value=\"Admin\">Admin (Full Access)</option> <option value=\"Read\">Read</option> <option value=\"Write\">Write</option> <option value=\"List\">List</option> <option value=\"Tagging\">Tagging</option> <optgroup label=\"Object Lock Permissions\"><option value=\"BypassGovernanceRetention\">Bypass Governance Retention</option> <option value=\"GetObjectRetention\">Get Object Retention</option> <option value=\"PutObjectRetention\">Put Object Retention</option> <option value=\"GetObjectLegalHold\">Get Object Legal Hold</option> <option value=\"PutObjectLegalHold\">Put Object Legal Hold</option> <option value=\"GetBucketObjectLockConfiguration\">Get Bucket Object Lock Configuration</option> <option value=\"PutBucketObjectLockConfiguration\">Put Bucket Object Lock Configuration</option></optgroup></select></div><div class=\"mb-3\"><label class=\"form-label\">Bucket Scope</label> <small class=\"form-text text-muted d-block mb-2\">Apply selected permissions to specific buckets or all buckets</small><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"editBucketScope\" id=\"editAllBuckets\" value=\"all\" checked onchange=\"toggleBucketList('edit')\"> <label class=\"form-check-label\" for=\"editAllBuckets\">All Buckets</label></div><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"editBucketScope\" id=\"editSpecificBuckets\" value=\"specific\" onchange=\"toggleBucketList('edit')\"> <label class=\"form-check-label\" for=\"editSpecificBuckets\">Specific Buckets</label></div><div id=\"editBucketSelectionList\" class=\"mt-2\" style=\"display: none;\"><select multiple class=\"form-select\" id=\"editSelectedBuckets\" size=\"5\"><!-- Options loaded dynamically --></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple buckets</small></div></div><div class=\"mb-3\"><label for=\"editPolicies\" class=\"form-label\">Attached Policies</label> <select multiple class=\"form-control\" id=\"editPolicies\" name=\"policies\" size=\"5\"><!-- Options loaded dynamically --></select></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleUpdateUser()\">Update User</button></div></div></div></div><!-- User Details Modal --><div class=\"modal fade\" id=\"userDetailsModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-user me-2\"></i>User Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\" id=\"userDetailsContent\"><!-- Content will be loaded dynamically --></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- Access Keys Management Modal --><div class=\"modal fade\" id=\"accessKeysModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-key me-2\"></i>Manage Access Keys</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><div class=\"d-flex justify-content-between align-items-center mb-3\"><h6>Access Keys for <span id=\"accessKeysUsername\"></span></h6><button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"createAccessKey()\"><i class=\"fas fa-plus me-1\"></i>Create New Key</button></div><div id=\"accessKeysContent\"><!-- Content will be loaded dynamically --></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- JavaScript for user management --><script>\n        // Access key status constants\n        const STATUS_ACTIVE = 'Active';\n        const STATUS_INACTIVE = 'Inactive';\n\n        document.addEventListener('DOMContentLoaded', function() {\n            \n            // Event delegation for user action buttons\n            document.addEventListener('click', function(e) {\n                const button = e.target.closest('[data-action]');\n                if (!button) return;\n                \n                const action = button.getAttribute('data-action');\n                const username = button.getAttribute('data-username');\n                \n                switch (action) {\n                    case 'show-user-details':\n                        showUserDetails(username);\n                        break;\n                    case 'edit-user':\n                        editUser(username);\n                        break;\n                    case 'manage-access-keys':\n                        manageAccessKeys(username);\n                        break;\n                    case 'delete-user':\n                        deleteUser(username);\n                        break;\n                }\n            });\n\n            // Event delegation for delete access key buttons\n            document.addEventListener('click', function(e) {\n                const deleteBtn = e.target.closest('.delete-access-key-btn');\n                if (deleteBtn) {\n                    const username = deleteBtn.getAttribute('data-username');\n                    const accessKey = deleteBtn.getAttribute('data-access-key');\n                    deleteAccessKey(username, accessKey);\n                }\n            });\n\n            // Event delegation for access key status changes\n            document.addEventListener('change', function(e) {\n                const statusSelect = e.target.closest('.access-key-status-select');\n                if (statusSelect) {\n                    const username = statusSelect.getAttribute('data-username');\n                    const accessKey = statusSelect.getAttribute('data-access-key');\n                    const newStatus = statusSelect.value;\n                    updateAccessKeyStatus(username, accessKey, newStatus);\n                }\n            });\n\n            // Load policies for dropdowns\n            loadPolicies();\n            \n            // Load buckets for bucket permissions\n            loadBuckets();\n        });\n\n        // Global variable to store available buckets\n        var availableBuckets = [];\n        var bucketPermissionCounter = 0;\n\n        // Load buckets\n        async function loadBuckets() {\n            try {\n                const response = await fetch('/api/s3/buckets');\n                if (response.ok) {\n                    const data = await response.json();\n                    availableBuckets = data.buckets || [];\n                    console.log('Loaded', availableBuckets.length, 'buckets');\n                    // Populate bucket selection dropdowns\n                    populateBucketSelections();\n                } else {\n                    console.warn('Failed to load buckets');\n                    availableBuckets = [];\n                }\n            } catch (error) {\n                console.error('Error loading buckets:', error);\n                availableBuckets = [];\n            }\n        }\n\n        // Load policies\n        async function loadPolicies() {\n            try {\n                const response = await fetch('/api/object-store/policies');\n                if (response.ok) {\n                    const data = await response.json();\n                    const policies = data.policies || [];\n                    \n                    const createSelect = document.getElementById('policies');\n                    const editSelect = document.getElementById('editPolicies');\n                    \n                    // Check if elements exist\n                    if (!createSelect || !editSelect) {\n                        console.warn('Policy select elements not found');\n                        return;\n                    }\n                    \n                    // Clear existing options\n                    createSelect.innerHTML = '';\n                    editSelect.innerHTML = '';\n                    \n                    if (policies && policies.length > 0) {\n                        policies.forEach(policy => {\n                            const option = document.createElement('option');\n                            option.value = policy.name;\n                            option.textContent = policy.name;\n                            createSelect.appendChild(option);\n                            editSelect.appendChild(option.cloneNode(true));\n                        });\n                    } else {\n                        const emptyOption = document.createElement('option');\n                        emptyOption.disabled = true;\n                        emptyOption.textContent = 'No policies available';\n                        createSelect.appendChild(emptyOption);\n                        editSelect.appendChild(emptyOption.cloneNode(true));\n                    }\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showErrorMessage('Failed to load policies: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error loading policies:', error);\n                showErrorMessage('Failed to load policies: ' + error.message);\n            }\n        }\n\n        // Toggle bucket permission fields when Admin checkbox changes\n        function toggleBucketPermissionFields(mode) {\n            mode = mode || 'create';\n            const adminCheckbox = document.getElementById(mode === 'edit' ? 'editBucketAdmin' : 'bucketAdmin');\n            const permissionFields = document.getElementById(mode === 'edit' ? 'editBucketPermissionFields' : 'bucketPermissionFields');\n            \n            if (adminCheckbox && permissionFields) {\n                permissionFields.style.display = adminCheckbox.checked ? 'none' : 'block';\n            }\n        }\n\n        // Toggle bucket list visibility when bucket scope changes\n        function toggleBucketList(mode) {\n            mode = mode || 'create';\n            const specificRadio = document.getElementById(mode === 'edit' ? 'editSpecificBuckets' : 'specificBuckets');\n            const bucketList = document.getElementById(mode === 'edit' ? 'editBucketSelectionList' : 'bucketSelectionList');\n            \n            if (specificRadio && bucketList) {\n                bucketList.style.display = specificRadio.checked ? 'block' : 'none';\n            }\n        }\n\n        // Populate bucket selection dropdowns\n        function populateBucketSelections() {\n            const createSelect = document.getElementById('selectedBuckets');\n            const editSelect = document.getElementById('editSelectedBuckets');\n            \n            [createSelect, editSelect].forEach(select => {\n                if (select) {\n                    select.innerHTML = '';\n                    availableBuckets.forEach(bucket => {\n                        const option = document.createElement('option');\n                        option.value = bucket.name;\n                        option.textContent = bucket.name;\n                        select.appendChild(option);\n                    });\n                }\n            });\n        }\n\n        // Parse bucket permissions from actions array for new UI\n        function parseBucketPermissions(actions) {\n            const result = {\n                isAdmin: false,\n                permissions: [],\n                applyToAll: false,\n                specificBuckets: []\n            };\n            \n            // Check if user has Admin permission\n            if (actions.includes('Admin')) {\n                result.isAdmin = true;\n                return result;\n            }\n            \n            // Separate bucket-scoped from global actions\n            const bucketActions = [];\n            const globalBucketPerms = [];\n            \n            actions.forEach(action => {\n                if (action.includes(':')) {\n                    const parts = action.split(':');\n                    const perm = parts[0];\n                    const bucket = parts.slice(1).join(':').replace(/\\/\\*$/, '');\n                    bucketActions.push({ permission: perm, bucket: bucket });\n                } else {\n                    globalBucketPerms.push(action);\n                }\n            });\n            \n            // If we have global bucket permissions (no colon), they apply to all buckets\n            if (globalBucketPerms.length > 0) {\n                result.permissions = globalBucketPerms;\n                result.applyToAll = true;\n            } else if (bucketActions.length > 0) {\n                // Get unique permissions and buckets\n                const perms = [...new Set(bucketActions.map(ba => ba.permission))];\n                const buckets = [...new Set(bucketActions.map(ba => ba.bucket))];\n                \n                result.permissions = perms;\n                result.applyToAll = false;\n                result.specificBuckets = buckets;\n            }\n            \n            return result;\n        }\n\n        // Build bucket permission action strings using original permissions dropdown\n        /**\n         * Builds bucket permission strings based on selected permissions and bucket scope.\n         * @param {string} mode - The operation mode, either 'create' or 'edit'.\n         * @returns {string[]|null} Array of permission strings (e.g., ['Read:bucket1']) or null if validation fails (specific scope selected but no buckets).\n         */\n        function buildBucketPermissions(mode) {\n            mode = mode || 'create';\n            const selectId = mode === 'edit' ? 'editActions' : 'actions';\n            const permSelect = document.getElementById(selectId);\n            \n            if (!permSelect) return [];\n            \n            // Get selected permissions from the original multi-select\n            const selectedPerms = Array.from(permSelect.selectedOptions).map(opt => opt.value);\n            \n            // If Admin is selected, return just Admin (it overrides everything)\n            if (selectedPerms.includes('Admin')) {\n                return ['Admin'];\n            }\n            \n            if (selectedPerms.length === 0) {\n                return [];\n            }\n            \n            // Check if applying to all buckets or specific ones\n            // Use querySelector to find the checked radio button by name group\n            const scopeName = mode === 'edit' ? 'editBucketScope' : 'bucketScope';\n            \n            // Try multiple methods to find the checked radio\n            let checkedRadio = document.querySelector(`input[name=\"${scopeName}\"]:checked`);\n            \n            // Fallback: check both radio buttons explicitly\n            if (!checkedRadio) {\n                const allBucketsId = mode === 'edit' ? 'editAllBuckets' : 'allBuckets';\n                const specificBucketsId = mode === 'edit' ? 'editSpecificBuckets' : 'specificBuckets';\n                \n                const allBucketsRadio = document.getElementById(allBucketsId);\n                const specificBucketsRadio = document.getElementById(specificBucketsId);\n                \n                if (specificBucketsRadio && specificBucketsRadio.checked) {\n                    checkedRadio = specificBucketsRadio;\n                } else if (allBucketsRadio && allBucketsRadio.checked) {\n                    checkedRadio = allBucketsRadio;\n                }\n            }\n\n            // Default to 'all' if nothing is checked (shouldn't happen) or if 'all' is checked\n            const applyToAll = !checkedRadio || checkedRadio.value === 'all';\n\n            if (applyToAll) {\n                // Return global permissions (no bucket specification)\n                return selectedPerms;\n            } else {\n                // Get selected specific buckets\n                const bucketSelect = document.getElementById(mode === 'edit' ? 'editSelectedBuckets' : 'selectedBuckets');\n                if (!bucketSelect) return null;\n                \n                const selectedBuckets = Array.from(bucketSelect.selectedOptions).map(opt => opt.value);\n                \n                // Return null to signal validation failure if no buckets selected\n                if (selectedBuckets.length === 0) {\n                    return null;\n                }\n                \n                // Build bucket-scoped permissions\n                const actions = [];\n                selectedPerms.forEach(perm => {\n                    selectedBuckets.forEach(bucket => {\n                        actions.push(perm + ':' + bucket);\n                    });\n                });\n                \n                return actions;\n            }\n        }\n\n        // Show user details modal\n        async function showUserDetails(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    document.getElementById('userDetailsContent').innerHTML = createUserDetailsContent(user);\n                    const modal = new bootstrap.Modal(document.getElementById('userDetailsModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load user details');\n                }\n            } catch (error) {\n                console.error('Error loading user details:', error);\n                showErrorMessage('Failed to load user details');\n            }\n        }\n\n        // Edit user function\n        async function editUser(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    \n                    // Populate edit form\n                    document.getElementById('editUsername').value = username;\n                    document.getElementById('editEmail').value = user.email || '';\n                    \n                    // Set selected actions\n                    const actionsSelect = document.getElementById('editActions');\n                    Array.from(actionsSelect.options).forEach(option => {\n                        option.selected = user.actions && user.actions.includes(option.value);\n                    });\n\n                    // Set selected policies\n                    const policiesSelect = document.getElementById('editPolicies');\n                    if (policiesSelect) {\n                        Array.from(policiesSelect.options).forEach(option => {\n                            option.selected = user.policy_names && user.policy_names.includes(option.value);\n                        });\n                    }\n                    \n                    // Populate bucket permissions using original permissions dropdown\n                    if (user.actions && user.actions.length > 0) {\n                        const bucketPerms = parseBucketPermissions(user.actions);\n                        \n                        // Set permissions in the original multi-select\n                        const actionsSelect = document.getElementById('editActions');\n                        if (actionsSelect) {\n                            Array.from(actionsSelect.options).forEach(option => {\n                                if (bucketPerms.isAdmin && option.value === 'Admin') {\n                                    option.selected = true;\n                                } else if (!bucketPerms.isAdmin && bucketPerms.permissions.includes(option.value)) {\n                                    option.selected = true;\n                                }\n                            });\n                        }\n                        \n                        // Set bucket scope (all or specific)\n                        const allBucketsRadio = document.getElementById('editAllBuckets');\n                        const specificBucketsRadio = document.getElementById('editSpecificBuckets');\n                        \n                        if (!bucketPerms.isAdmin) {\n                            if (bucketPerms.applyToAll) {\n                                if (allBucketsRadio) allBucketsRadio.checked = true;\n                            } else if (bucketPerms.specificBuckets.length > 0) {\n                                if (specificBucketsRadio) specificBucketsRadio.checked = true;\n                                toggleBucketList('edit');\n                                \n                                // Select specific buckets\n                                const bucketSelect = document.getElementById('editSelectedBuckets');\n                                if (bucketSelect) {\n                                    Array.from(bucketSelect.options).forEach(option => {\n                                        option.selected = bucketPerms.specificBuckets.includes(option.value);\n                                    });\n                                }\n                            }\n                        }\n                    }\n                    \n                    // Show modal\n                    const modal = new bootstrap.Modal(document.getElementById('editUserModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load user details');\n                }\n            } catch (error) {\n                console.error('Error loading user:', error);\n                showErrorMessage('Failed to load user details');\n            }\n        }\n\n        // Manage access keys function\n        async function manageAccessKeys(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    document.getElementById('accessKeysUsername').textContent = username;\n                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);\n                    const modal = new bootstrap.Modal(document.getElementById('accessKeysModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load access keys');\n                }\n            } catch (error) {\n                console.error('Error loading access keys:', error);\n                showErrorMessage('Failed to load access keys');\n            }\n        }\n\n        // Delete user function\n        async function deleteUser(username) {\n            if (confirm(`Are you sure you want to delete user \"${username}\"? This action cannot be undone.`)) {\n                try {\n                    const response = await fetch(`/api/users/${username}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('User deleted successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete user: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting user:', error);\n                    showErrorMessage('Failed to delete user: ' + error.message);\n                }\n            }\n        }\n\n        // Handle create user form submission\n        async function handleCreateUser() {\n            const form = document.getElementById('createUserForm');\n            const formData = new FormData(form);\n            \n            // Get permissions with bucket scope applied\n            const allActions = buildBucketPermissions('create');\n            \n            const userData = {\n                username: formData.get('username'),\n                email: formData.get('email'),\n                actions: allActions,\n                policy_names: Array.from(document.getElementById('policies').selectedOptions).map(option => option.value),\n                generate_key: document.getElementById('generateKey').checked\n            };\n            \n            try {\n                const response = await fetch('/api/users', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify(userData)\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    showSuccessMessage('User created successfully');\n                    \n                    // Show the created access key if generated\n                    if (result.user && result.user.access_key) {\n                        showNewAccessKeyModal(result.user);\n                    }\n                    \n                    // Close modal and refresh page\n                    const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal'));\n                    modal.hide();\n                    form.reset();\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create user: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating user:', error);\n                showErrorMessage('Failed to create user: ' + error.message);\n            }\n        }\n\n\n        // Handle update user form submission\n        async function handleUpdateUser() {\n            const username = document.getElementById('editUsername').value;\n            if (!username) {\n                showErrorMessage('Username is required');\n                return;\n            }\n            \n            // Get permissions with bucket scope applied\n            const allActions = buildBucketPermissions('edit');\n            \n            // Validate that permissions are not empty\n            if (!allActions || allActions.length === 0) {\n                showErrorMessage('At least one permission must be selected');\n                return;\n            }\n            \n            // Check for null (validation failure from buildBucketPermissionsNew)\n            if (allActions === null) {\n                showErrorMessage('Please select at least one bucket when using specific bucket permissions');\n                return;\n            }\n            \n            const userData = {\n                email: document.getElementById('editEmail').value,\n                actions: allActions,\n                policy_names: Array.from(document.getElementById('editPolicies').selectedOptions).map(option => option.value)\n            };\n            \n            try {\n                const response = await fetch(`/api/users/${username}`, {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify(userData)\n                });\n                \n                if (response.ok) {\n                    showSuccessMessage('User updated successfully');\n                    \n                    // Close modal and refresh page\n                    const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));\n                    modal.hide();\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update user: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error updating user:', error);\n                showErrorMessage('Failed to update user: ' + error.message);\n            }\n        }\n\n\n        // Create user details content\n        function createUserDetailsContent(user) {\n            var detailsHtml = '<div class=\"row\">';\n            detailsHtml += '<div class=\"col-md-6\">';\n            detailsHtml += '<h6 class=\"text-muted\">Basic Information</h6>';\n            detailsHtml += '<table class=\"table table-sm\">';\n            detailsHtml += '<tr><td><strong>Username:</strong></td><td>' + escapeHtml(user.username) + '</td></tr>';\n            detailsHtml += '<tr><td><strong>Email:</strong></td><td>' + escapeHtml(user.email || 'Not set') + '</td></tr>';\n            detailsHtml += '</table>';\n            detailsHtml += '</div>';\n            detailsHtml += '<div class=\"col-md-6\">';\n                         detailsHtml += '<h6 class=\"text-muted\">Permissions</h6>';\n             detailsHtml += '<div class=\"mb-3\">';\n             if (user.actions && user.actions.length > 0) {\n                 detailsHtml += user.actions.map(function(action) {\n                     return '<span class=\"badge bg-info me-1\">' + escapeHtml(action) + '</span>';\n                 }).join('');\n             } else {\n                 detailsHtml += '<span class=\"text-muted\">No permissions assigned</span>';\n             }\n              detailsHtml += '</div>';\n              detailsHtml += '<h6 class=\"text-muted\">Attached Policy Names</h6>';\n              detailsHtml += '<div class=\"mb-3\">';\n              if (user.policy_names && user.policy_names.length > 0) {\n                  detailsHtml += user.policy_names.map(function(policy) {\n                      return '<span class=\"badge bg-secondary me-1\">' + escapeHtml(policy) + '</span>';\n                  }).join('');\n              } else {\n                  detailsHtml += '<span class=\"text-muted\">No policies attached</span>';\n              }\n              detailsHtml += '</div>';\n              detailsHtml += '<h6 class=\"text-muted\">Access Keys</h6>';\n             if (user.access_keys && user.access_keys.length > 0) {\n                 detailsHtml += '<div class=\"mb-2\">';\n                 user.access_keys.forEach(function(key) {\n                     detailsHtml += '<div><code class=\"text-muted\">' + escapeHtml(key.access_key) + '</code></div>';\n                 });\n                 detailsHtml += '</div>';\n             } else {\n                 detailsHtml += '<p class=\"text-muted\">No access keys</p>';\n             }\n            detailsHtml += '</div>';\n            detailsHtml += '</div>';\n            return detailsHtml;\n        }\n\n        // Create access keys content\n        function createAccessKeysContent(user) {\n            if (!user.access_keys || user.access_keys.length === 0) {\n                return '<p class=\"text-muted\">No access keys available</p>';\n            }\n            \n            var keysHtml = '<div class=\"table-responsive\">';\n            keysHtml += '<table class=\"table table-sm\">';\n            keysHtml += '<thead><tr><th>Access Key</th><th>Status</th><th>Actions</th></tr></thead>';\n            keysHtml += '<tbody>';\n            \n            user.access_keys.forEach(function(key) {\n                keysHtml += '<tr>';\n                keysHtml += '<td><code>' + escapeHtml(key.access_key) + '</code></td>';\n                keysHtml += '<td>';\n                keysHtml += '<select class=\"form-select form-select-sm access-key-status-select\" data-username=\"' + escapeHtml(user.username) + '\" data-access-key=\"' + escapeHtml(key.access_key) + '\" style=\"width: 110px;\">';\n                keysHtml += '<option value=\"' + STATUS_ACTIVE + '\" ' + (key.status === STATUS_ACTIVE || !key.status ? 'selected' : '') + '>' + STATUS_ACTIVE + '</option>';\n                keysHtml += '<option value=\"' + STATUS_INACTIVE + '\" ' + (key.status === STATUS_INACTIVE ? 'selected' : '') + '>' + STATUS_INACTIVE + '</option>';\n                keysHtml += '</select>';\n                keysHtml += '</td>';\n                keysHtml += '<td>';\n                // Add \"View Secret\" button with data attributes\n                keysHtml += '<button class=\"btn btn-outline-secondary btn-sm me-2 view-secret-btn\" data-access-key=\"' + escapeHtml(key.access_key) + '\" data-secret-key=\"' + escapeHtml(key.secret_key) + '\">';\n                keysHtml += '<i class=\"fas fa-eye\"></i> View Secret';\n                keysHtml += '</button>';\n                // Delete button\n                keysHtml += '<button class=\"btn btn-outline-danger btn-sm delete-access-key-btn\" data-username=\"' + escapeHtml(user.username) + '\" data-access-key=\"' + escapeHtml(key.access_key) + '\">';\n                keysHtml += '<i class=\"fas fa-trash\"></i> Delete';\n                keysHtml += '</button>';\n                keysHtml += '</td>';\n                keysHtml += '</tr>';\n            });\n            \n            keysHtml += '</tbody>';\n            keysHtml += '</table>';\n            keysHtml += '</div>';\n            \n            // Add delegated event listener for view secret buttons\n            setTimeout(() => {\n                document.querySelectorAll('.view-secret-btn').forEach(btn => {\n                    btn.addEventListener('click', function() {\n                        const accessKey = this.getAttribute('data-access-key');\n                        const secretKey = this.getAttribute('data-secret-key');\n                        showSecretKey(accessKey, secretKey);\n                    });\n                });\n            }, 100);\n            \n            return keysHtml;\n        }\n\n        // Refresh access keys list content\n        async function refreshAccessKeysList(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);\n                }\n            } catch (error) {\n                console.error('Error refreshing access keys:', error);\n            }\n        }\n\n        // Update access key status\n        async function updateAccessKeyStatus(username, accessKey, status) {\n            try {\n                const response = await fetch(`/api/users/${encodeURIComponent(username)}/access-keys/${encodeURIComponent(accessKey)}/status`, {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify({ status: status })\n                });\n\n                if (response.ok) {\n                    showSuccessMessage('Access key status updated successfully');\n                    // Refresh access keys display without toggling modal\n                    refreshAccessKeysList(username);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update access key status: ' + (error.error || 'Unknown error'));\n                    refreshAccessKeysList(username);\n                }\n            } catch (error) {\n                console.error('Error updating access key status:', error);\n                showErrorMessage('Failed to update access key status: ' + error.message);\n                refreshAccessKeysList(username);\n            }\n        }\n\n        // Create new access key\n        async function createAccessKey() {\n            const username = document.getElementById('accessKeysUsername').textContent;\n            \n            try {\n                const response = await fetch(`/api/users/${username}/access-keys`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify({})\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    \n                    // Show the new access key details (IMPORTANT: secret key is only shown once!)\n                    if (result.access_key) {\n                        showNewAccessKeyModal(result.access_key);\n                    }\n                    \n                    showSuccessMessage('Access key created successfully');\n                    \n                    // Refresh access keys display\n                    refreshAccessKeysList(username);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create access key: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating access key:', error);\n                showErrorMessage('Failed to create access key: ' + error.message);\n            }\n        }\n\n        // Delete access key\n        async function deleteAccessKey(username, accessKey) {\n            if (confirm('Are you sure you want to delete this access key?')) {\n                try {\n                    const response = await fetch(`/api/users/${username}/access-keys/${accessKey}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('Access key deleted successfully');\n                        \n                        // Refresh access keys display\n                        refreshAccessKeysList(username);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete access key: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting access key:', error);\n                    showErrorMessage('Failed to delete access key: ' + error.message);\n                }\n            }\n        }\n\n\n        // Utility functions\n        function showSuccessMessage(message) {\n            // Simple implementation - could be enhanced with toast notifications\n            alert('Success: ' + message);\n        }\n\n        function showErrorMessage(message) {\n            // Simple implementation - could be enhanced with toast notifications\n            alert('Error: ' + message);\n        }\n\n        function escapeHtml(text) {\n            if (!text) return '';\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</small></div></div></div><!-- Create User Modal --><div class=\"modal fade\" id=\"createUserModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-user-plus me-2\"></i>Create New User</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><form id=\"createUserForm\"><div class=\"mb-3\"><label for=\"username\" class=\"form-label\">Username *</label> <input type=\"text\" class=\"form-control\" id=\"username\" name=\"username\" required></div><div class=\"mb-3\"><label for=\"email\" class=\"form-label\">Email</label> <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\"></div><div class=\"mb-3\"><label for=\"actions\" class=\"form-label\">Permissions</label> <select multiple class=\"form-control\" id=\"actions\" name=\"actions\" size=\"10\"><option value=\"Admin\">Admin (Full Access)</option> <option value=\"Read\">Read</option> <option value=\"Write\">Write</option> <option value=\"List\">List</option> <option value=\"Tagging\">Tagging</option> <optgroup label=\"Object Lock Permissions\"><option value=\"BypassGovernanceRetention\">Bypass Governance Retention</option> <option value=\"GetObjectRetention\">Get Object Retention</option> <option value=\"PutObjectRetention\">Put Object Retention</option> <option value=\"GetObjectLegalHold\">Get Object Legal Hold</option> <option value=\"PutObjectLegalHold\">Put Object Legal Hold</option> <option value=\"GetBucketObjectLockConfiguration\">Get Bucket Object Lock Configuration</option> <option value=\"PutBucketObjectLockConfiguration\">Put Bucket Object Lock Configuration</option></optgroup></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple permissions</small></div><div class=\"mb-3\"><label class=\"form-label\">Bucket Scope</label> <small class=\"form-text text-muted d-block mb-2\">Apply selected permissions to specific buckets or all buckets</small><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"bucketScope\" id=\"allBuckets\" value=\"all\" checked onchange=\"toggleBucketList()\"> <label class=\"form-check-label\" for=\"allBuckets\">All Buckets</label></div><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"bucketScope\" id=\"specificBuckets\" value=\"specific\" onchange=\"toggleBucketList()\"> <label class=\"form-check-label\" for=\"specificBuckets\">Specific Buckets</label></div><div id=\"bucketSelectionList\" class=\"mt-2\" style=\"display: none;\"><select multiple class=\"form-select\" id=\"selectedBuckets\" size=\"5\"><!-- Options loaded dynamically --></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple buckets</small></div></div><div class=\"mb-3\"><label for=\"policies\" class=\"form-label\">Attached Policies</label> <select multiple class=\"form-control\" id=\"policies\" name=\"policies\" size=\"5\"><!-- Options loaded dynamically --></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple policies</small></div><div class=\"mb-3 form-check\"><input type=\"checkbox\" class=\"form-check-input\" id=\"generateKey\" name=\"generateKey\" checked> <label class=\"form-check-label\" for=\"generateKey\">Generate access key automatically</label></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleCreateUser()\">Create User</button></div></div></div></div><!-- Edit User Modal --><div class=\"modal fade\" id=\"editUserModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-user-edit me-2\"></i>Edit User</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><form id=\"editUserForm\"><input type=\"hidden\" id=\"editUsername\" name=\"username\"><div class=\"mb-3\"><label for=\"editEmail\" class=\"form-label\">Email</label> <input type=\"email\" class=\"form-control\" id=\"editEmail\" name=\"email\"></div><div class=\"mb-3\"><label for=\"editActions\" class=\"form-label\">Permissions</label> <select multiple class=\"form-control\" id=\"editActions\" name=\"actions\" size=\"10\"><option value=\"Admin\">Admin (Full Access)</option> <option value=\"Read\">Read</option> <option value=\"Write\">Write</option> <option value=\"List\">List</option> <option value=\"Tagging\">Tagging</option> <optgroup label=\"Object Lock Permissions\"><option value=\"BypassGovernanceRetention\">Bypass Governance Retention</option> <option value=\"GetObjectRetention\">Get Object Retention</option> <option value=\"PutObjectRetention\">Put Object Retention</option> <option value=\"GetObjectLegalHold\">Get Object Legal Hold</option> <option value=\"PutObjectLegalHold\">Put Object Legal Hold</option> <option value=\"GetBucketObjectLockConfiguration\">Get Bucket Object Lock Configuration</option> <option value=\"PutBucketObjectLockConfiguration\">Put Bucket Object Lock Configuration</option></optgroup></select></div><div class=\"mb-3\"><label class=\"form-label\">Bucket Scope</label> <small class=\"form-text text-muted d-block mb-2\">Apply selected permissions to specific buckets or all buckets</small><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"editBucketScope\" id=\"editAllBuckets\" value=\"all\" checked onchange=\"toggleBucketList('edit')\"> <label class=\"form-check-label\" for=\"editAllBuckets\">All Buckets</label></div><div class=\"form-check mb-2\"><input class=\"form-check-input\" type=\"radio\" name=\"editBucketScope\" id=\"editSpecificBuckets\" value=\"specific\" onchange=\"toggleBucketList('edit')\"> <label class=\"form-check-label\" for=\"editSpecificBuckets\">Specific Buckets</label></div><div id=\"editBucketSelectionList\" class=\"mt-2\" style=\"display: none;\"><select multiple class=\"form-select\" id=\"editSelectedBuckets\" size=\"5\"><!-- Options loaded dynamically --></select> <small class=\"form-text text-muted\">Hold Ctrl/Cmd to select multiple buckets</small></div></div><div class=\"mb-3\"><label for=\"editPolicies\" class=\"form-label\">Attached Policies</label> <select multiple class=\"form-control\" id=\"editPolicies\" name=\"policies\" size=\"5\"><!-- Options loaded dynamically --></select></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleUpdateUser()\">Update User</button></div></div></div></div><!-- User Details Modal --><div class=\"modal fade\" id=\"userDetailsModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-user me-2\"></i>User Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\" id=\"userDetailsContent\"><!-- Content will be loaded dynamically --></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- Access Keys Management Modal --><div class=\"modal fade\" id=\"accessKeysModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-key me-2\"></i>Manage Access Keys</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\"><div class=\"d-flex justify-content-between align-items-center mb-3\"><h6>Access Keys for <span id=\"accessKeysUsername\"></span></h6><button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"createAccessKey()\"><i class=\"fas fa-plus me-1\"></i>Create New Key</button></div><div id=\"accessKeysContent\"><!-- Content will be loaded dynamically --></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- JavaScript for user management --><script>\n        // Access key status constants\n        const STATUS_ACTIVE = 'Active';\n        const STATUS_INACTIVE = 'Inactive';\n\n        document.addEventListener('DOMContentLoaded', function() {\n            \n            // Event delegation for user action buttons\n            document.addEventListener('click', function(e) {\n                const button = e.target.closest('[data-action]');\n                if (!button) return;\n                \n                const action = button.getAttribute('data-action');\n                const username = button.getAttribute('data-username');\n                \n                switch (action) {\n                    case 'show-user-details':\n                        showUserDetails(username);\n                        break;\n                    case 'edit-user':\n                        editUser(username);\n                        break;\n                    case 'manage-access-keys':\n                        manageAccessKeys(username);\n                        break;\n                    case 'delete-user':\n                        deleteUser(username);\n                        break;\n                }\n            });\n\n            // Event delegation for delete access key buttons\n            document.addEventListener('click', function(e) {\n                const deleteBtn = e.target.closest('.delete-access-key-btn');\n                if (deleteBtn) {\n                    const username = deleteBtn.getAttribute('data-username');\n                    const accessKey = deleteBtn.getAttribute('data-access-key');\n                    deleteAccessKey(username, accessKey);\n                }\n            });\n\n            // Event delegation for access key status changes\n            document.addEventListener('change', function(e) {\n                const statusSelect = e.target.closest('.access-key-status-select');\n                if (statusSelect) {\n                    const username = statusSelect.getAttribute('data-username');\n                    const accessKey = statusSelect.getAttribute('data-access-key');\n                    const newStatus = statusSelect.value;\n                    updateAccessKeyStatus(username, accessKey, newStatus);\n                }\n            });\n\n            // Load policies for dropdowns\n            loadPolicies();\n            \n            // Load buckets for bucket permissions\n            loadBuckets();\n        });\n\n        // Global variable to store available buckets\n        var availableBuckets = [];\n        var bucketPermissionCounter = 0;\n\n        // Load buckets\n        async function loadBuckets() {\n            try {\n                const response = await fetch('/api/s3/buckets');\n                if (response.ok) {\n                    const data = await response.json();\n                    availableBuckets = data.buckets || [];\n                    console.log('Loaded', availableBuckets.length, 'buckets');\n                    // Populate bucket selection dropdowns\n                    populateBucketSelections();\n                } else {\n                    console.warn('Failed to load buckets');\n                    availableBuckets = [];\n                }\n            } catch (error) {\n                console.error('Error loading buckets:', error);\n                availableBuckets = [];\n            }\n        }\n\n        // Load policies\n        async function loadPolicies() {\n            try {\n                const response = await fetch('/api/object-store/policies');\n                if (response.ok) {\n                    const data = await response.json();\n                    const policies = data.policies || [];\n                    \n                    const createSelect = document.getElementById('policies');\n                    const editSelect = document.getElementById('editPolicies');\n                    \n                    // Check if elements exist\n                    if (!createSelect || !editSelect) {\n                        console.warn('Policy select elements not found');\n                        return;\n                    }\n                    \n                    // Clear existing options\n                    createSelect.innerHTML = '';\n                    editSelect.innerHTML = '';\n                    \n                    if (policies && policies.length > 0) {\n                        policies.forEach(policy => {\n                            const option = document.createElement('option');\n                            option.value = policy.name;\n                            option.textContent = policy.name;\n                            createSelect.appendChild(option);\n                            editSelect.appendChild(option.cloneNode(true));\n                        });\n                    } else {\n                        const emptyOption = document.createElement('option');\n                        emptyOption.disabled = true;\n                        emptyOption.textContent = 'No policies available';\n                        createSelect.appendChild(emptyOption);\n                        editSelect.appendChild(emptyOption.cloneNode(true));\n                    }\n                } else {\n                    const error = await response.json().catch(() => ({}));\n                    showErrorMessage('Failed to load policies: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error loading policies:', error);\n                showErrorMessage('Failed to load policies: ' + error.message);\n            }\n        }\n\n        // Toggle bucket permission fields when Admin checkbox changes\n        function toggleBucketPermissionFields(mode) {\n            mode = mode || 'create';\n            const adminCheckbox = document.getElementById(mode === 'edit' ? 'editBucketAdmin' : 'bucketAdmin');\n            const permissionFields = document.getElementById(mode === 'edit' ? 'editBucketPermissionFields' : 'bucketPermissionFields');\n            \n            if (adminCheckbox && permissionFields) {\n                permissionFields.style.display = adminCheckbox.checked ? 'none' : 'block';\n            }\n        }\n\n        // Toggle bucket list visibility when bucket scope changes\n        function toggleBucketList(mode) {\n            mode = mode || 'create';\n            const specificRadio = document.getElementById(mode === 'edit' ? 'editSpecificBuckets' : 'specificBuckets');\n            const bucketList = document.getElementById(mode === 'edit' ? 'editBucketSelectionList' : 'bucketSelectionList');\n            \n            if (specificRadio && bucketList) {\n                bucketList.style.display = specificRadio.checked ? 'block' : 'none';\n            }\n        }\n\n        // Populate bucket selection dropdowns\n        function populateBucketSelections() {\n            const createSelect = document.getElementById('selectedBuckets');\n            const editSelect = document.getElementById('editSelectedBuckets');\n            \n            [createSelect, editSelect].forEach(select => {\n                if (select) {\n                    select.innerHTML = '';\n                    availableBuckets.forEach(bucket => {\n                        const option = document.createElement('option');\n                        option.value = bucket.name;\n                        option.textContent = bucket.name;\n                        select.appendChild(option);\n                    });\n                }\n            });\n        }\n\n        // Parse bucket permissions from actions array for new UI\n        function parseBucketPermissions(actions) {\n            const result = {\n                isAdmin: false,\n                permissions: [],\n                applyToAll: false,\n                specificBuckets: []\n            };\n            \n            // Check if user has Admin permission\n            if (actions.includes('Admin')) {\n                result.isAdmin = true;\n                return result;\n            }\n            \n            // Separate bucket-scoped from global actions\n            const bucketActions = [];\n            const globalBucketPerms = [];\n            \n            actions.forEach(action => {\n                if (action.includes(':')) {\n                    const parts = action.split(':');\n                    const perm = parts[0];\n                    const bucket = parts.slice(1).join(':').replace(/\\/\\*$/, '');\n                    bucketActions.push({ permission: perm, bucket: bucket });\n                } else {\n                    globalBucketPerms.push(action);\n                }\n            });\n            \n            // If we have global bucket permissions (no colon), they apply to all buckets\n            if (globalBucketPerms.length > 0) {\n                result.permissions = globalBucketPerms;\n                result.applyToAll = true;\n            } else if (bucketActions.length > 0) {\n                // Get unique permissions and buckets\n                const perms = [...new Set(bucketActions.map(ba => ba.permission))];\n                const buckets = [...new Set(bucketActions.map(ba => ba.bucket))];\n                \n                result.permissions = perms;\n                result.applyToAll = false;\n                result.specificBuckets = buckets;\n            }\n            \n            return result;\n        }\n\n        // Build bucket permission action strings using original permissions dropdown\n        /**\n         * Builds bucket permission strings based on selected permissions and bucket scope.\n         * @param {string} mode - The operation mode, either 'create' or 'edit'.\n         * @returns {string[]|null} Array of permission strings (e.g., ['Read:bucket1']) or null if validation fails (specific scope selected but no buckets).\n         */\n        function buildBucketPermissions(mode) {\n            mode = mode || 'create';\n            const selectId = mode === 'edit' ? 'editActions' : 'actions';\n            const permSelect = document.getElementById(selectId);\n            \n            if (!permSelect) return [];\n            \n            // Get selected permissions from the original multi-select\n            const selectedPerms = Array.from(permSelect.selectedOptions).map(opt => opt.value);\n            \n            // If Admin is selected, return just Admin (it overrides everything)\n            if (selectedPerms.includes('Admin')) {\n                return ['Admin'];\n            }\n            \n            if (selectedPerms.length === 0) {\n                return [];\n            }\n            \n            // Check if applying to all buckets or specific ones\n            // Use querySelector to find the checked radio button by name group\n            const scopeName = mode === 'edit' ? 'editBucketScope' : 'bucketScope';\n            \n            // Try multiple methods to find the checked radio\n            let checkedRadio = document.querySelector(`input[name=\"${scopeName}\"]:checked`);\n            \n            // Fallback: check both radio buttons explicitly\n            if (!checkedRadio) {\n                const allBucketsId = mode === 'edit' ? 'editAllBuckets' : 'allBuckets';\n                const specificBucketsId = mode === 'edit' ? 'editSpecificBuckets' : 'specificBuckets';\n                \n                const allBucketsRadio = document.getElementById(allBucketsId);\n                const specificBucketsRadio = document.getElementById(specificBucketsId);\n                \n                if (specificBucketsRadio && specificBucketsRadio.checked) {\n                    checkedRadio = specificBucketsRadio;\n                } else if (allBucketsRadio && allBucketsRadio.checked) {\n                    checkedRadio = allBucketsRadio;\n                }\n            }\n\n            // Default to 'all' if nothing is checked (shouldn't happen) or if 'all' is checked\n            const applyToAll = !checkedRadio || checkedRadio.value === 'all';\n\n            if (applyToAll) {\n                // Return global permissions (no bucket specification)\n                return selectedPerms;\n            } else {\n                // Get selected specific buckets\n                const bucketSelect = document.getElementById(mode === 'edit' ? 'editSelectedBuckets' : 'selectedBuckets');\n                if (!bucketSelect) return null;\n                \n                const selectedBuckets = Array.from(bucketSelect.selectedOptions).map(opt => opt.value);\n                \n                // Return null to signal validation failure if no buckets selected\n                if (selectedBuckets.length === 0) {\n                    return null;\n                }\n                \n                // Build bucket-scoped permissions\n                const actions = [];\n                selectedPerms.forEach(perm => {\n                    selectedBuckets.forEach(bucket => {\n                        actions.push(perm + ':' + bucket);\n                    });\n                });\n                \n                return actions;\n            }\n        }\n\n        // Show user details modal\n        async function showUserDetails(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    document.getElementById('userDetailsContent').innerHTML = createUserDetailsContent(user);\n                    const modal = new bootstrap.Modal(document.getElementById('userDetailsModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load user details');\n                }\n            } catch (error) {\n                console.error('Error loading user details:', error);\n                showErrorMessage('Failed to load user details');\n            }\n        }\n\n        // Edit user function\n        async function editUser(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    \n                    // Populate edit form\n                    document.getElementById('editUsername').value = username;\n                    document.getElementById('editEmail').value = user.email || '';\n                    \n                    // Set selected actions\n                    const actionsSelect = document.getElementById('editActions');\n                    Array.from(actionsSelect.options).forEach(option => {\n                        option.selected = user.actions && user.actions.includes(option.value);\n                    });\n\n                    // Set selected policies\n                    const policiesSelect = document.getElementById('editPolicies');\n                    if (policiesSelect) {\n                        Array.from(policiesSelect.options).forEach(option => {\n                            option.selected = user.policy_names && user.policy_names.includes(option.value);\n                        });\n                    }\n                    \n                    // Populate bucket permissions using original permissions dropdown\n                    if (user.actions && user.actions.length > 0) {\n                        const bucketPerms = parseBucketPermissions(user.actions);\n                        \n                        // Set permissions in the original multi-select\n                        const actionsSelect = document.getElementById('editActions');\n                        if (actionsSelect) {\n                            Array.from(actionsSelect.options).forEach(option => {\n                                if (bucketPerms.isAdmin && option.value === 'Admin') {\n                                    option.selected = true;\n                                } else if (!bucketPerms.isAdmin && bucketPerms.permissions.includes(option.value)) {\n                                    option.selected = true;\n                                }\n                            });\n                        }\n                        \n                        // Set bucket scope (all or specific)\n                        const allBucketsRadio = document.getElementById('editAllBuckets');\n                        const specificBucketsRadio = document.getElementById('editSpecificBuckets');\n                        \n                        if (!bucketPerms.isAdmin) {\n                            if (bucketPerms.applyToAll) {\n                                if (allBucketsRadio) allBucketsRadio.checked = true;\n                            } else if (bucketPerms.specificBuckets.length > 0) {\n                                if (specificBucketsRadio) specificBucketsRadio.checked = true;\n                                toggleBucketList('edit');\n                                \n                                // Select specific buckets\n                                const bucketSelect = document.getElementById('editSelectedBuckets');\n                                if (bucketSelect) {\n                                    Array.from(bucketSelect.options).forEach(option => {\n                                        option.selected = bucketPerms.specificBuckets.includes(option.value);\n                                    });\n                                }\n                            }\n                        }\n                    }\n                    \n                    // Show modal\n                    const modal = new bootstrap.Modal(document.getElementById('editUserModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load user details');\n                }\n            } catch (error) {\n                console.error('Error loading user:', error);\n                showErrorMessage('Failed to load user details');\n            }\n        }\n\n        // Manage access keys function\n        async function manageAccessKeys(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    document.getElementById('accessKeysUsername').textContent = username;\n                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);\n                    const modal = new bootstrap.Modal(document.getElementById('accessKeysModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load access keys');\n                }\n            } catch (error) {\n                console.error('Error loading access keys:', error);\n                showErrorMessage('Failed to load access keys');\n            }\n        }\n\n        // Delete user function\n        async function deleteUser(username) {\n            showDeleteConfirm(username, async function() {\n                try {\n                    const response = await fetch(`/api/users/${username}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('User deleted successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete user: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting user:', error);\n                    showErrorMessage('Failed to delete user: ' + error.message);\n                }\n            }, 'Are you sure you want to delete this user? This action cannot be undone.');\n        }\n\n        // Handle create user form submission\n        async function handleCreateUser() {\n            const form = document.getElementById('createUserForm');\n            const formData = new FormData(form);\n            \n            // Get permissions with bucket scope applied\n            const allActions = buildBucketPermissions('create');\n            \n            const userData = {\n                username: formData.get('username'),\n                email: formData.get('email'),\n                actions: allActions,\n                policy_names: Array.from(document.getElementById('policies').selectedOptions).map(option => option.value),\n                generate_key: document.getElementById('generateKey').checked\n            };\n            \n            try {\n                const response = await fetch('/api/users', {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify(userData)\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    showSuccessMessage('User created successfully');\n                    \n                    // Show the created access key if generated\n                    if (result.user && result.user.access_key) {\n                        showNewAccessKeyModal(result.user);\n                    }\n                    \n                    // Close modal and refresh page\n                    const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal'));\n                    modal.hide();\n                    form.reset();\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create user: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating user:', error);\n                showErrorMessage('Failed to create user: ' + error.message);\n            }\n        }\n\n\n        // Handle update user form submission\n        async function handleUpdateUser() {\n            const username = document.getElementById('editUsername').value;\n            if (!username) {\n                showErrorMessage('Username is required');\n                return;\n            }\n            \n            // Get permissions with bucket scope applied\n            const allActions = buildBucketPermissions('edit');\n            \n            // Validate that permissions are not empty\n            if (!allActions || allActions.length === 0) {\n                showErrorMessage('At least one permission must be selected');\n                return;\n            }\n            \n            // Check for null (validation failure from buildBucketPermissionsNew)\n            if (allActions === null) {\n                showErrorMessage('Please select at least one bucket when using specific bucket permissions');\n                return;\n            }\n            \n            const userData = {\n                email: document.getElementById('editEmail').value,\n                actions: allActions,\n                policy_names: Array.from(document.getElementById('editPolicies').selectedOptions).map(option => option.value)\n            };\n            \n            try {\n                const response = await fetch(`/api/users/${username}`, {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify(userData)\n                });\n                \n                if (response.ok) {\n                    showSuccessMessage('User updated successfully');\n                    \n                    // Close modal and refresh page\n                    const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));\n                    modal.hide();\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update user: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error updating user:', error);\n                showErrorMessage('Failed to update user: ' + error.message);\n            }\n        }\n\n\n        // Create user details content\n        function createUserDetailsContent(user) {\n            var detailsHtml = '<div class=\"row\">';\n            detailsHtml += '<div class=\"col-md-6\">';\n            detailsHtml += '<h6 class=\"text-muted\">Basic Information</h6>';\n            detailsHtml += '<table class=\"table table-sm\">';\n            detailsHtml += '<tr><td><strong>Username:</strong></td><td>' + escapeHtml(user.username) + '</td></tr>';\n            detailsHtml += '<tr><td><strong>Email:</strong></td><td>' + escapeHtml(user.email || 'Not set') + '</td></tr>';\n            detailsHtml += '</table>';\n            detailsHtml += '</div>';\n            detailsHtml += '<div class=\"col-md-6\">';\n                         detailsHtml += '<h6 class=\"text-muted\">Permissions</h6>';\n             detailsHtml += '<div class=\"mb-3\">';\n             if (user.actions && user.actions.length > 0) {\n                 detailsHtml += user.actions.map(function(action) {\n                     return '<span class=\"badge bg-info me-1\">' + escapeHtml(action) + '</span>';\n                 }).join('');\n             } else {\n                 detailsHtml += '<span class=\"text-muted\">No permissions assigned</span>';\n             }\n              detailsHtml += '</div>';\n              detailsHtml += '<h6 class=\"text-muted\">Attached Policy Names</h6>';\n              detailsHtml += '<div class=\"mb-3\">';\n              if (user.policy_names && user.policy_names.length > 0) {\n                  detailsHtml += user.policy_names.map(function(policy) {\n                      return '<span class=\"badge bg-secondary me-1\">' + escapeHtml(policy) + '</span>';\n                  }).join('');\n              } else {\n                  detailsHtml += '<span class=\"text-muted\">No policies attached</span>';\n              }\n              detailsHtml += '</div>';\n              detailsHtml += '<h6 class=\"text-muted\">Access Keys</h6>';\n             if (user.access_keys && user.access_keys.length > 0) {\n                 detailsHtml += '<div class=\"mb-2\">';\n                 user.access_keys.forEach(function(key) {\n                     detailsHtml += '<div><code class=\"text-muted\">' + escapeHtml(key.access_key) + '</code></div>';\n                 });\n                 detailsHtml += '</div>';\n             } else {\n                 detailsHtml += '<p class=\"text-muted\">No access keys</p>';\n             }\n            detailsHtml += '</div>';\n            detailsHtml += '</div>';\n            return detailsHtml;\n        }\n\n        // Create access keys content\n        function createAccessKeysContent(user) {\n            if (!user.access_keys || user.access_keys.length === 0) {\n                return '<p class=\"text-muted\">No access keys available</p>';\n            }\n            \n            var keysHtml = '<div class=\"table-responsive\">';\n            keysHtml += '<table class=\"table table-sm\">';\n            keysHtml += '<thead><tr><th>Access Key</th><th>Status</th><th>Actions</th></tr></thead>';\n            keysHtml += '<tbody>';\n            \n            user.access_keys.forEach(function(key) {\n                keysHtml += '<tr>';\n                keysHtml += '<td><code>' + escapeHtml(key.access_key) + '</code></td>';\n                keysHtml += '<td>';\n                keysHtml += '<select class=\"form-select form-select-sm access-key-status-select\" data-username=\"' + escapeHtml(user.username) + '\" data-access-key=\"' + escapeHtml(key.access_key) + '\" style=\"width: 110px;\">';\n                keysHtml += '<option value=\"' + STATUS_ACTIVE + '\" ' + (key.status === STATUS_ACTIVE || !key.status ? 'selected' : '') + '>' + STATUS_ACTIVE + '</option>';\n                keysHtml += '<option value=\"' + STATUS_INACTIVE + '\" ' + (key.status === STATUS_INACTIVE ? 'selected' : '') + '>' + STATUS_INACTIVE + '</option>';\n                keysHtml += '</select>';\n                keysHtml += '</td>';\n                keysHtml += '<td>';\n                // Add \"View Secret\" button with data attributes\n                keysHtml += '<button class=\"btn btn-outline-secondary btn-sm me-2 view-secret-btn\" data-access-key=\"' + escapeHtml(key.access_key) + '\" data-secret-key=\"' + escapeHtml(key.secret_key) + '\">';\n                keysHtml += '<i class=\"fas fa-eye\"></i> View Secret';\n                keysHtml += '</button>';\n                // Delete button\n                keysHtml += '<button class=\"btn btn-outline-danger btn-sm delete-access-key-btn\" data-username=\"' + escapeHtml(user.username) + '\" data-access-key=\"' + escapeHtml(key.access_key) + '\">';\n                keysHtml += '<i class=\"fas fa-trash\"></i> Delete';\n                keysHtml += '</button>';\n                keysHtml += '</td>';\n                keysHtml += '</tr>';\n            });\n            \n            keysHtml += '</tbody>';\n            keysHtml += '</table>';\n            keysHtml += '</div>';\n            \n            // Add delegated event listener for view secret buttons\n            setTimeout(() => {\n                document.querySelectorAll('.view-secret-btn').forEach(btn => {\n                    btn.addEventListener('click', function() {\n                        const accessKey = this.getAttribute('data-access-key');\n                        const secretKey = this.getAttribute('data-secret-key');\n                        showSecretKey(accessKey, secretKey);\n                    });\n                });\n            }, 100);\n            \n            return keysHtml;\n        }\n\n        // Refresh access keys list content\n        async function refreshAccessKeysList(username) {\n            try {\n                const response = await fetch(`/api/users/${username}`);\n                if (response.ok) {\n                    const user = await response.json();\n                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);\n                }\n            } catch (error) {\n                console.error('Error refreshing access keys:', error);\n            }\n        }\n\n        // Update access key status\n        async function updateAccessKeyStatus(username, accessKey, status) {\n            try {\n                const response = await fetch(`/api/users/${encodeURIComponent(username)}/access-keys/${encodeURIComponent(accessKey)}/status`, {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify({ status: status })\n                });\n\n                if (response.ok) {\n                    showSuccessMessage('Access key status updated successfully');\n                    // Refresh access keys display without toggling modal\n                    refreshAccessKeysList(username);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update access key status: ' + (error.error || 'Unknown error'));\n                    refreshAccessKeysList(username);\n                }\n            } catch (error) {\n                console.error('Error updating access key status:', error);\n                showErrorMessage('Failed to update access key status: ' + error.message);\n                refreshAccessKeysList(username);\n            }\n        }\n\n        // Create new access key\n        async function createAccessKey() {\n            const username = document.getElementById('accessKeysUsername').textContent;\n            \n            try {\n                const response = await fetch(`/api/users/${username}/access-keys`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                    },\n                    body: JSON.stringify({})\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    \n                    // Show the new access key details (IMPORTANT: secret key is only shown once!)\n                    if (result.access_key) {\n                        showNewAccessKeyModal(result.access_key);\n                    }\n                    \n                    showSuccessMessage('Access key created successfully');\n                    \n                    // Refresh access keys display\n                    refreshAccessKeysList(username);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create access key: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating access key:', error);\n                showErrorMessage('Failed to create access key: ' + error.message);\n            }\n        }\n\n        // Delete access key\n        async function deleteAccessKey(username, accessKey) {\n            showDeleteConfirm(accessKey, async function() {\n                try {\n                    const response = await fetch(`/api/users/${username}/access-keys/${accessKey}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('Access key deleted successfully');\n                        \n                        // Refresh access keys display\n                        refreshAccessKeysList(username);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete access key: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting access key:', error);\n                    showErrorMessage('Failed to delete access key: ' + error.message);\n                }\n            }, 'Are you sure you want to delete this access key?');\n        }\n\n\n        // Utility functions\n        function showSuccessMessage(message) {\n            // Simple implementation - could be enhanced with toast notifications\n            alert('Success: ' + message);\n        }\n\n        function showErrorMessage(message) {\n            // Simple implementation - could be enhanced with toast notifications\n            alert('Error: ' + message);\n        }\n\n        function escapeHtml(text) {\n            if (!text) return '';\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/policies.templ b/weed/admin/view/app/policies.templ
index e613d535e..a61ac6b55 100644
--- a/weed/admin/view/app/policies.templ
+++ b/weed/admin/view/app/policies.templ
@@ -635,7 +635,7 @@ templ Policies(data dash.PoliciesData) {
     }
     
     function deletePolicy(policyName) {
-        if (confirm('Are you sure you want to delete policy "' + policyName + '"?')) {
+        showDeleteConfirm(policyName, function() {
             fetch('/api/object-store/policies/' + encodeURIComponent(policyName), {
                 method: 'DELETE'
             })
@@ -643,7 +643,7 @@ templ Policies(data dash.PoliciesData) {
             .then(data => {
                 if (data.success) {
                     alert('Policy deleted successfully!');
-                    location.reload(); // Refresh the page
+                    location.reload();
                 } else {
                     alert('Error deleting policy: ' + (data.error || 'Unknown error'));
                 }
@@ -652,7 +652,7 @@ templ Policies(data dash.PoliciesData) {
                 console.error('Error:', error);
                 alert('Error deleting policy: ' + error.message);
             });
-        }
+        }, 'Are you sure you want to delete this policy?');
     }
     </script>
 } 
\ No newline at end of file
diff --git a/weed/admin/view/app/policies_templ.go b/weed/admin/view/app/policies_templ.go
index 89aa83db5..30f92e158 100644
--- a/weed/admin/view/app/policies_templ.go
+++ b/weed/admin/view/app/policies_templ.go
@@ -193,7 +193,7 @@ func Policies(data dash.PoliciesData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</tbody></table></div></div></div></div></div></div><!-- Create Policy Modal --><div class=\"modal fade\" id=\"createPolicyModal\" tabindex=\"-1\" aria-labelledby=\"createPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"createPolicyModalLabel\"><i class=\"fas fa-shield-alt me-2\"></i>Create IAM Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><form id=\"createPolicyForm\"><div class=\"mb-3\"><label for=\"policyName\" class=\"form-label\">Policy Name</label> <input type=\"text\" class=\"form-control\" id=\"policyName\" name=\"name\" required placeholder=\"e.g., S3ReadOnlyPolicy\"><div class=\"form-text\">Enter a unique name for this policy (alphanumeric and underscores only)</div></div><div class=\"mb-3\"><label for=\"policyDocument\" class=\"form-label\">Policy Document</label> <textarea class=\"form-control\" id=\"policyDocument\" name=\"document\" rows=\"15\" required placeholder=\"Enter IAM policy JSON document...\"></textarea><div class=\"form-text\">Enter the policy document in AWS IAM JSON format</div></div><div class=\"mb-3\"><div class=\"row\"><div class=\"col-md-6\"><button type=\"button\" class=\"btn btn-outline-info btn-sm\" onclick=\"insertSamplePolicy()\"><i class=\"fas fa-file-alt me-1\"></i>Use Sample Policy</button></div><div class=\"col-md-6 text-end\"><button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" onclick=\"validatePolicyDocument()\"><i class=\"fas fa-check me-1\"></i>Validate JSON</button></div></div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"createPolicy()\"><i class=\"fas fa-plus me-1\"></i>Create Policy</button></div></div></div></div><!-- View Policy Modal --><div class=\"modal fade\" id=\"viewPolicyModal\" tabindex=\"-1\" aria-labelledby=\"viewPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"viewPolicyModalLabel\"><i class=\"fas fa-eye me-2\"></i>View IAM Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><div id=\"viewPolicyContent\"><div class=\"text-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div><p class=\"mt-2\">Loading policy...</p></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button> <button type=\"button\" class=\"btn btn-primary\" id=\"editFromViewBtn\"><i class=\"fas fa-edit me-1\"></i>Edit Policy</button></div></div></div></div><!-- Edit Policy Modal --><div class=\"modal fade\" id=\"editPolicyModal\" tabindex=\"-1\" aria-labelledby=\"editPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"editPolicyModalLabel\"><i class=\"fas fa-edit me-2\"></i>Edit IAM Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><form id=\"editPolicyForm\"><div class=\"mb-3\"><label for=\"editPolicyName\" class=\"form-label\">Policy Name</label> <input type=\"text\" class=\"form-control\" id=\"editPolicyName\" name=\"name\" readonly><div class=\"form-text\">Policy name cannot be changed</div></div><div class=\"mb-3\"><label for=\"editPolicyDocument\" class=\"form-label\">Policy Document</label> <textarea class=\"form-control\" id=\"editPolicyDocument\" name=\"document\" rows=\"15\" required></textarea><div class=\"form-text\">Edit the policy document in AWS IAM JSON format</div></div><div class=\"mb-3\"><div class=\"row\"><div class=\"col-md-6\"><button type=\"button\" class=\"btn btn-outline-info btn-sm\" onclick=\"insertSamplePolicyEdit()\"><i class=\"fas fa-file-alt me-1\"></i>Reset to Sample</button></div><div class=\"col-md-6 text-end\"><button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" onclick=\"validateEditPolicyDocument()\"><i class=\"fas fa-check me-1\"></i>Validate JSON</button></div></div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"updatePolicy()\"><i class=\"fas fa-save me-1\"></i>Save Changes</button></div></div></div></div><!-- JavaScript for Policy Management --><script>\n    // Current policy being viewed/edited\n    let currentPolicy = null;\n    \n    // Event listeners for policy actions\n    document.addEventListener('DOMContentLoaded', function() {\n        // View policy buttons\n        document.querySelectorAll('.view-policy-btn').forEach(button => {\n            button.addEventListener('click', function() {\n                const policyName = this.getAttribute('data-policy-name');\n                viewPolicy(policyName);\n            });\n        });\n        \n        // Edit policy buttons\n        document.querySelectorAll('.edit-policy-btn').forEach(button => {\n            button.addEventListener('click', function() {\n                const policyName = this.getAttribute('data-policy-name');\n                editPolicy(policyName);\n            });\n        });\n        \n        // Delete policy buttons\n        document.querySelectorAll('.delete-policy-btn').forEach(button => {\n            button.addEventListener('click', function() {\n                const policyName = this.getAttribute('data-policy-name');\n                deletePolicy(policyName);\n            });\n        });\n        \n        // Edit from view button\n        document.getElementById('editFromViewBtn').addEventListener('click', function() {\n            if (currentPolicy) {\n                const viewModal = bootstrap.Modal.getInstance(document.getElementById('viewPolicyModal'));\n                if (viewModal) viewModal.hide();\n                editPolicy(currentPolicy.name);\n            }\n        });\n    });\n    \n    function createPolicy() {\n        const form = document.getElementById('createPolicyForm');\n        const formData = new FormData(form);\n        \n        const policyName = formData.get('name');\n        const policyDocumentText = formData.get('document');\n        \n        if (!policyName || !policyDocumentText) {\n            alert('Please fill in all required fields');\n            return;\n        }\n        \n        let policyDocument;\n        try {\n            policyDocument = JSON.parse(policyDocumentText);\n        } catch (e) {\n            alert('Invalid JSON in policy document: ' + e.message);\n            return;\n        }\n        \n        const requestData = {\n            name: policyName,\n            document: policyDocument\n        };\n        \n        fetch('/api/object-store/policies', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            body: JSON.stringify(requestData)\n        })\n        .then(response => response.json())\n        .then(data => {\n            if (data.success) {\n                alert('Policy created successfully!');\n                const modal = bootstrap.Modal.getInstance(document.getElementById('createPolicyModal'));\n                if (modal) modal.hide();\n                location.reload(); // Refresh the page to show the new policy\n            } else {\n                alert('Error creating policy: ' + (data.error || 'Unknown error'));\n            }\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error creating policy: ' + error.message);\n        });\n    }\n    \n    function viewPolicy(policyName) {\n        // Show the modal first\n        const modal = new bootstrap.Modal(document.getElementById('viewPolicyModal'));\n        modal.show();\n        \n        // Reset content to loading state\n        document.getElementById('viewPolicyContent').innerHTML = `\n            <div class=\"text-center\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n                <p class=\"mt-2\">Loading policy...</p>\n            </div>\n        `;\n        \n        // Fetch policy data\n        fetch('/api/object-store/policies/' + encodeURIComponent(policyName))\n        .then(response => {\n            if (!response.ok) {\n                throw new Error('Policy not found');\n            }\n            return response.json();\n        })\n        .then(policy => {\n            currentPolicy = policy;\n            displayPolicyDetails(policy);\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            document.getElementById('viewPolicyContent').innerHTML = `\n                <div class=\"alert alert-danger\" role=\"alert\">\n                    <i class=\"fas fa-exclamation-triangle me-2\"></i>\n                    Error loading policy: ${error.message}\n                </div>\n            `;\n        });\n    }\n    \n    function displayPolicyDetails(policy) {\n        const content = document.getElementById('viewPolicyContent');\n        \n        let statementsHtml = '';\n        if (policy.document && policy.document.Statement) {\n            statementsHtml = policy.document.Statement.map((stmt, index) => `\n                <div class=\"card mb-2\">\n                    <div class=\"card-header py-2\">\n                        <h6 class=\"mb-0\">Statement ${index + 1}</h6>\n                    </div>\n                    <div class=\"card-body py-2\">\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <strong>Effect:</strong> \n                                <span class=\"badge ${stmt.Effect === 'Allow' ? 'bg-success' : 'bg-danger'}\">${stmt.Effect}</span>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <strong>Actions:</strong> ${Array.isArray(stmt.Action) ? stmt.Action.join(', ') : stmt.Action}\n                            </div>\n                        </div>\n                        <div class=\"row mt-2\">\n                            <div class=\"col-12\">\n                                <strong>Resources:</strong> ${Array.isArray(stmt.Resource) ? stmt.Resource.join(', ') : stmt.Resource}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            `).join('');\n        }\n        \n        content.innerHTML = `\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <strong>Policy Name:</strong> ${policy.name || 'Unknown'}\n                </div>\n                <div class=\"col-md-6\">\n                    <strong>Version:</strong> <span class=\"badge bg-info\">${policy.document?.Version || 'Unknown'}</span>\n                </div>\n            </div>\n            \n            <div class=\"mb-3\">\n                <strong>Statements:</strong>\n                <div class=\"mt-2\">\n                    ${statementsHtml || '<p class=\"text-muted\">No statements found</p>'}\n                </div>\n            </div>\n            \n            <div class=\"mb-3\">\n                <strong>Raw Policy Document:</strong>\n                <pre class=\"bg-light p-3 border rounded mt-2\"><code>${JSON.stringify(policy.document, null, 2)}</code></pre>\n            </div>\n        `;\n    }\n    \n    function editPolicy(policyName) {\n        // Show the modal first\n        const modal = new bootstrap.Modal(document.getElementById('editPolicyModal'));\n        modal.show();\n        \n        // Set policy name\n        document.getElementById('editPolicyName').value = policyName;\n        document.getElementById('editPolicyDocument').value = 'Loading...';\n        \n        // Fetch policy data\n        fetch('/api/object-store/policies/' + encodeURIComponent(policyName))\n        .then(response => {\n            if (!response.ok) {\n                throw new Error('Policy not found');\n            }\n            return response.json();\n        })\n        .then(policy => {\n            currentPolicy = policy;\n            document.getElementById('editPolicyDocument').value = JSON.stringify(policy.document, null, 2);\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error loading policy for editing: ' + error.message);\n            const editModal = bootstrap.Modal.getInstance(document.getElementById('editPolicyModal'));\n            if (editModal) editModal.hide();\n        });\n    }\n    \n    function updatePolicy() {\n        const policyName = document.getElementById('editPolicyName').value;\n        const policyDocumentText = document.getElementById('editPolicyDocument').value;\n        \n        if (!policyName || !policyDocumentText) {\n            alert('Please fill in all required fields');\n            return;\n        }\n        \n        let policyDocument;\n        try {\n            policyDocument = JSON.parse(policyDocumentText);\n        } catch (e) {\n            alert('Invalid JSON in policy document: ' + e.message);\n            return;\n        }\n        \n        const requestData = {\n            document: policyDocument\n        };\n        \n        fetch('/api/object-store/policies/' + encodeURIComponent(policyName), {\n            method: 'PUT',\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            body: JSON.stringify(requestData)\n        })\n        .then(response => response.json())\n        .then(data => {\n            if (data.success) {\n                alert('Policy updated successfully!');\n                const modal = bootstrap.Modal.getInstance(document.getElementById('editPolicyModal'));\n                if (modal) modal.hide();\n                location.reload(); // Refresh the page to show the updated policy\n            } else {\n                alert('Error updating policy: ' + (data.error || 'Unknown error'));\n            }\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error updating policy: ' + error.message);\n        });\n    }\n    \n    function insertSamplePolicy() {\n        const samplePolicy = {\n            \"Version\": \"2012-10-17\",\n            \"Statement\": [\n                {\n                    \"Effect\": \"Allow\",\n                    \"Action\": [\n                        \"s3:GetObject\",\n                        \"s3:PutObject\"\n                    ],\n                    \"Resource\": [\n                        \"arn:aws:s3:::my-bucket/*\"\n                    ]\n                }\n            ]\n        };\n        \n        document.getElementById('policyDocument').value = JSON.stringify(samplePolicy, null, 2);\n    }\n    \n    function insertSamplePolicyEdit() {\n        const samplePolicy = {\n            \"Version\": \"2012-10-17\",\n            \"Statement\": [\n                {\n                    \"Effect\": \"Allow\",\n                    \"Action\": [\n                        \"s3:GetObject\",\n                        \"s3:PutObject\"\n                    ],\n                    \"Resource\": [\n                        \"arn:aws:s3:::my-bucket/*\"\n                    ]\n                }\n            ]\n        };\n        \n        document.getElementById('editPolicyDocument').value = JSON.stringify(samplePolicy, null, 2);\n    }\n    \n    function validatePolicyDocument() {\n        const policyText = document.getElementById('policyDocument').value;\n        validatePolicyJSON(policyText);\n    }\n    \n    function validateEditPolicyDocument() {\n        const policyText = document.getElementById('editPolicyDocument').value;\n        validatePolicyJSON(policyText);\n    }\n    \n    function validatePolicyJSON(policyText) {\n        if (!policyText) {\n            alert('Please enter a policy document first');\n            return;\n        }\n        \n        try {\n            const policy = JSON.parse(policyText);\n            \n            // Basic validation\n            if (!policy.Version) {\n                alert('Policy must have a Version field');\n                return;\n            }\n            \n            if (!policy.Statement || !Array.isArray(policy.Statement)) {\n                alert('Policy must have a Statement array');\n                return;\n            }\n            \n            alert('Policy document is valid JSON!');\n        } catch (e) {\n            alert('Invalid JSON: ' + e.message);\n        }\n    }\n    \n    function deletePolicy(policyName) {\n        if (confirm('Are you sure you want to delete policy \"' + policyName + '\"?')) {\n            fetch('/api/object-store/policies/' + encodeURIComponent(policyName), {\n                method: 'DELETE'\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    alert('Policy deleted successfully!');\n                    location.reload(); // Refresh the page\n                } else {\n                    alert('Error deleting policy: ' + (data.error || 'Unknown error'));\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('Error deleting policy: ' + error.message);\n            });\n        }\n    }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</tbody></table></div></div></div></div></div></div><!-- Create Policy Modal --><div class=\"modal fade\" id=\"createPolicyModal\" tabindex=\"-1\" aria-labelledby=\"createPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"createPolicyModalLabel\"><i class=\"fas fa-shield-alt me-2\"></i>Create IAM Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><form id=\"createPolicyForm\"><div class=\"mb-3\"><label for=\"policyName\" class=\"form-label\">Policy Name</label> <input type=\"text\" class=\"form-control\" id=\"policyName\" name=\"name\" required placeholder=\"e.g., S3ReadOnlyPolicy\"><div class=\"form-text\">Enter a unique name for this policy (alphanumeric and underscores only)</div></div><div class=\"mb-3\"><label for=\"policyDocument\" class=\"form-label\">Policy Document</label> <textarea class=\"form-control\" id=\"policyDocument\" name=\"document\" rows=\"15\" required placeholder=\"Enter IAM policy JSON document...\"></textarea><div class=\"form-text\">Enter the policy document in AWS IAM JSON format</div></div><div class=\"mb-3\"><div class=\"row\"><div class=\"col-md-6\"><button type=\"button\" class=\"btn btn-outline-info btn-sm\" onclick=\"insertSamplePolicy()\"><i class=\"fas fa-file-alt me-1\"></i>Use Sample Policy</button></div><div class=\"col-md-6 text-end\"><button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" onclick=\"validatePolicyDocument()\"><i class=\"fas fa-check me-1\"></i>Validate JSON</button></div></div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"createPolicy()\"><i class=\"fas fa-plus me-1\"></i>Create Policy</button></div></div></div></div><!-- View Policy Modal --><div class=\"modal fade\" id=\"viewPolicyModal\" tabindex=\"-1\" aria-labelledby=\"viewPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"viewPolicyModalLabel\"><i class=\"fas fa-eye me-2\"></i>View IAM Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><div id=\"viewPolicyContent\"><div class=\"text-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div><p class=\"mt-2\">Loading policy...</p></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button> <button type=\"button\" class=\"btn btn-primary\" id=\"editFromViewBtn\"><i class=\"fas fa-edit me-1\"></i>Edit Policy</button></div></div></div></div><!-- Edit Policy Modal --><div class=\"modal fade\" id=\"editPolicyModal\" tabindex=\"-1\" aria-labelledby=\"editPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"editPolicyModalLabel\"><i class=\"fas fa-edit me-2\"></i>Edit IAM Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><form id=\"editPolicyForm\"><div class=\"mb-3\"><label for=\"editPolicyName\" class=\"form-label\">Policy Name</label> <input type=\"text\" class=\"form-control\" id=\"editPolicyName\" name=\"name\" readonly><div class=\"form-text\">Policy name cannot be changed</div></div><div class=\"mb-3\"><label for=\"editPolicyDocument\" class=\"form-label\">Policy Document</label> <textarea class=\"form-control\" id=\"editPolicyDocument\" name=\"document\" rows=\"15\" required></textarea><div class=\"form-text\">Edit the policy document in AWS IAM JSON format</div></div><div class=\"mb-3\"><div class=\"row\"><div class=\"col-md-6\"><button type=\"button\" class=\"btn btn-outline-info btn-sm\" onclick=\"insertSamplePolicyEdit()\"><i class=\"fas fa-file-alt me-1\"></i>Reset to Sample</button></div><div class=\"col-md-6 text-end\"><button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" onclick=\"validateEditPolicyDocument()\"><i class=\"fas fa-check me-1\"></i>Validate JSON</button></div></div></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"updatePolicy()\"><i class=\"fas fa-save me-1\"></i>Save Changes</button></div></div></div></div><!-- JavaScript for Policy Management --><script>\n    // Current policy being viewed/edited\n    let currentPolicy = null;\n    \n    // Event listeners for policy actions\n    document.addEventListener('DOMContentLoaded', function() {\n        // View policy buttons\n        document.querySelectorAll('.view-policy-btn').forEach(button => {\n            button.addEventListener('click', function() {\n                const policyName = this.getAttribute('data-policy-name');\n                viewPolicy(policyName);\n            });\n        });\n        \n        // Edit policy buttons\n        document.querySelectorAll('.edit-policy-btn').forEach(button => {\n            button.addEventListener('click', function() {\n                const policyName = this.getAttribute('data-policy-name');\n                editPolicy(policyName);\n            });\n        });\n        \n        // Delete policy buttons\n        document.querySelectorAll('.delete-policy-btn').forEach(button => {\n            button.addEventListener('click', function() {\n                const policyName = this.getAttribute('data-policy-name');\n                deletePolicy(policyName);\n            });\n        });\n        \n        // Edit from view button\n        document.getElementById('editFromViewBtn').addEventListener('click', function() {\n            if (currentPolicy) {\n                const viewModal = bootstrap.Modal.getInstance(document.getElementById('viewPolicyModal'));\n                if (viewModal) viewModal.hide();\n                editPolicy(currentPolicy.name);\n            }\n        });\n    });\n    \n    function createPolicy() {\n        const form = document.getElementById('createPolicyForm');\n        const formData = new FormData(form);\n        \n        const policyName = formData.get('name');\n        const policyDocumentText = formData.get('document');\n        \n        if (!policyName || !policyDocumentText) {\n            alert('Please fill in all required fields');\n            return;\n        }\n        \n        let policyDocument;\n        try {\n            policyDocument = JSON.parse(policyDocumentText);\n        } catch (e) {\n            alert('Invalid JSON in policy document: ' + e.message);\n            return;\n        }\n        \n        const requestData = {\n            name: policyName,\n            document: policyDocument\n        };\n        \n        fetch('/api/object-store/policies', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            body: JSON.stringify(requestData)\n        })\n        .then(response => response.json())\n        .then(data => {\n            if (data.success) {\n                alert('Policy created successfully!');\n                const modal = bootstrap.Modal.getInstance(document.getElementById('createPolicyModal'));\n                if (modal) modal.hide();\n                location.reload(); // Refresh the page to show the new policy\n            } else {\n                alert('Error creating policy: ' + (data.error || 'Unknown error'));\n            }\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error creating policy: ' + error.message);\n        });\n    }\n    \n    function viewPolicy(policyName) {\n        // Show the modal first\n        const modal = new bootstrap.Modal(document.getElementById('viewPolicyModal'));\n        modal.show();\n        \n        // Reset content to loading state\n        document.getElementById('viewPolicyContent').innerHTML = `\n            <div class=\"text-center\">\n                <div class=\"spinner-border\" role=\"status\">\n                    <span class=\"visually-hidden\">Loading...</span>\n                </div>\n                <p class=\"mt-2\">Loading policy...</p>\n            </div>\n        `;\n        \n        // Fetch policy data\n        fetch('/api/object-store/policies/' + encodeURIComponent(policyName))\n        .then(response => {\n            if (!response.ok) {\n                throw new Error('Policy not found');\n            }\n            return response.json();\n        })\n        .then(policy => {\n            currentPolicy = policy;\n            displayPolicyDetails(policy);\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            document.getElementById('viewPolicyContent').innerHTML = `\n                <div class=\"alert alert-danger\" role=\"alert\">\n                    <i class=\"fas fa-exclamation-triangle me-2\"></i>\n                    Error loading policy: ${error.message}\n                </div>\n            `;\n        });\n    }\n    \n    function displayPolicyDetails(policy) {\n        const content = document.getElementById('viewPolicyContent');\n        \n        let statementsHtml = '';\n        if (policy.document && policy.document.Statement) {\n            statementsHtml = policy.document.Statement.map((stmt, index) => `\n                <div class=\"card mb-2\">\n                    <div class=\"card-header py-2\">\n                        <h6 class=\"mb-0\">Statement ${index + 1}</h6>\n                    </div>\n                    <div class=\"card-body py-2\">\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <strong>Effect:</strong> \n                                <span class=\"badge ${stmt.Effect === 'Allow' ? 'bg-success' : 'bg-danger'}\">${stmt.Effect}</span>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <strong>Actions:</strong> ${Array.isArray(stmt.Action) ? stmt.Action.join(', ') : stmt.Action}\n                            </div>\n                        </div>\n                        <div class=\"row mt-2\">\n                            <div class=\"col-12\">\n                                <strong>Resources:</strong> ${Array.isArray(stmt.Resource) ? stmt.Resource.join(', ') : stmt.Resource}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            `).join('');\n        }\n        \n        content.innerHTML = `\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <strong>Policy Name:</strong> ${policy.name || 'Unknown'}\n                </div>\n                <div class=\"col-md-6\">\n                    <strong>Version:</strong> <span class=\"badge bg-info\">${policy.document?.Version || 'Unknown'}</span>\n                </div>\n            </div>\n            \n            <div class=\"mb-3\">\n                <strong>Statements:</strong>\n                <div class=\"mt-2\">\n                    ${statementsHtml || '<p class=\"text-muted\">No statements found</p>'}\n                </div>\n            </div>\n            \n            <div class=\"mb-3\">\n                <strong>Raw Policy Document:</strong>\n                <pre class=\"bg-light p-3 border rounded mt-2\"><code>${JSON.stringify(policy.document, null, 2)}</code></pre>\n            </div>\n        `;\n    }\n    \n    function editPolicy(policyName) {\n        // Show the modal first\n        const modal = new bootstrap.Modal(document.getElementById('editPolicyModal'));\n        modal.show();\n        \n        // Set policy name\n        document.getElementById('editPolicyName').value = policyName;\n        document.getElementById('editPolicyDocument').value = 'Loading...';\n        \n        // Fetch policy data\n        fetch('/api/object-store/policies/' + encodeURIComponent(policyName))\n        .then(response => {\n            if (!response.ok) {\n                throw new Error('Policy not found');\n            }\n            return response.json();\n        })\n        .then(policy => {\n            currentPolicy = policy;\n            document.getElementById('editPolicyDocument').value = JSON.stringify(policy.document, null, 2);\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error loading policy for editing: ' + error.message);\n            const editModal = bootstrap.Modal.getInstance(document.getElementById('editPolicyModal'));\n            if (editModal) editModal.hide();\n        });\n    }\n    \n    function updatePolicy() {\n        const policyName = document.getElementById('editPolicyName').value;\n        const policyDocumentText = document.getElementById('editPolicyDocument').value;\n        \n        if (!policyName || !policyDocumentText) {\n            alert('Please fill in all required fields');\n            return;\n        }\n        \n        let policyDocument;\n        try {\n            policyDocument = JSON.parse(policyDocumentText);\n        } catch (e) {\n            alert('Invalid JSON in policy document: ' + e.message);\n            return;\n        }\n        \n        const requestData = {\n            document: policyDocument\n        };\n        \n        fetch('/api/object-store/policies/' + encodeURIComponent(policyName), {\n            method: 'PUT',\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            body: JSON.stringify(requestData)\n        })\n        .then(response => response.json())\n        .then(data => {\n            if (data.success) {\n                alert('Policy updated successfully!');\n                const modal = bootstrap.Modal.getInstance(document.getElementById('editPolicyModal'));\n                if (modal) modal.hide();\n                location.reload(); // Refresh the page to show the updated policy\n            } else {\n                alert('Error updating policy: ' + (data.error || 'Unknown error'));\n            }\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error updating policy: ' + error.message);\n        });\n    }\n    \n    function insertSamplePolicy() {\n        const samplePolicy = {\n            \"Version\": \"2012-10-17\",\n            \"Statement\": [\n                {\n                    \"Effect\": \"Allow\",\n                    \"Action\": [\n                        \"s3:GetObject\",\n                        \"s3:PutObject\"\n                    ],\n                    \"Resource\": [\n                        \"arn:aws:s3:::my-bucket/*\"\n                    ]\n                }\n            ]\n        };\n        \n        document.getElementById('policyDocument').value = JSON.stringify(samplePolicy, null, 2);\n    }\n    \n    function insertSamplePolicyEdit() {\n        const samplePolicy = {\n            \"Version\": \"2012-10-17\",\n            \"Statement\": [\n                {\n                    \"Effect\": \"Allow\",\n                    \"Action\": [\n                        \"s3:GetObject\",\n                        \"s3:PutObject\"\n                    ],\n                    \"Resource\": [\n                        \"arn:aws:s3:::my-bucket/*\"\n                    ]\n                }\n            ]\n        };\n        \n        document.getElementById('editPolicyDocument').value = JSON.stringify(samplePolicy, null, 2);\n    }\n    \n    function validatePolicyDocument() {\n        const policyText = document.getElementById('policyDocument').value;\n        validatePolicyJSON(policyText);\n    }\n    \n    function validateEditPolicyDocument() {\n        const policyText = document.getElementById('editPolicyDocument').value;\n        validatePolicyJSON(policyText);\n    }\n    \n    function validatePolicyJSON(policyText) {\n        if (!policyText) {\n            alert('Please enter a policy document first');\n            return;\n        }\n        \n        try {\n            const policy = JSON.parse(policyText);\n            \n            // Basic validation\n            if (!policy.Version) {\n                alert('Policy must have a Version field');\n                return;\n            }\n            \n            if (!policy.Statement || !Array.isArray(policy.Statement)) {\n                alert('Policy must have a Statement array');\n                return;\n            }\n            \n            alert('Policy document is valid JSON!');\n        } catch (e) {\n            alert('Invalid JSON: ' + e.message);\n        }\n    }\n    \n    function deletePolicy(policyName) {\n        showDeleteConfirm(policyName, function() {\n            fetch('/api/object-store/policies/' + encodeURIComponent(policyName), {\n                method: 'DELETE'\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    alert('Policy deleted successfully!');\n                    location.reload();\n                } else {\n                    alert('Error deleting policy: ' + (data.error || 'Unknown error'));\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('Error deleting policy: ' + error.message);\n            });\n        }, 'Are you sure you want to delete this policy?');\n    }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/service_accounts.templ b/weed/admin/view/app/service_accounts.templ
index 5c85ac3ce..f0bb12b4c 100644
--- a/weed/admin/view/app/service_accounts.templ
+++ b/weed/admin/view/app/service_accounts.templ
@@ -373,7 +373,7 @@ templ ServiceAccounts(data dash.ServiceAccountsData) {
         }
 
         async function deleteSA(id) {
-            if (confirm('Are you sure you want to delete this service account? This action cannot be undone.')) {
+            showDeleteConfirm(id, async function() {
                 try {
                     const response = await fetch(`/api/service-accounts/${id}`, {
                         method: 'DELETE'
@@ -390,7 +390,7 @@ templ ServiceAccounts(data dash.ServiceAccountsData) {
                     console.error('Error deleting service account:', error);
                     showErrorMessage('Failed to delete: ' + error.message);
                 }
-            }
+            }, 'Are you sure you want to delete this service account? This action cannot be undone.');
         }
 
         async function handleCreateServiceAccount() {
diff --git a/weed/admin/view/app/service_accounts_templ.go b/weed/admin/view/app/service_accounts_templ.go
index d4fa05b5e..960152edf 100644
--- a/weed/admin/view/app/service_accounts_templ.go
+++ b/weed/admin/view/app/service_accounts_templ.go
@@ -272,7 +272,7 @@ func ServiceAccounts(data dash.ServiceAccountsData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</select> <small class=\"form-text text-muted\">The service account will inherit permissions from this user</small></div><div class=\"mb-3\"><label for=\"description\" class=\"form-label\">Description</label> <textarea class=\"form-control\" id=\"description\" name=\"description\" rows=\"2\" placeholder=\"What is this service account used for?\"></textarea></div><div class=\"mb-3\"><label for=\"expiration\" class=\"form-label\">Expiration (optional)</label> <input type=\"datetime-local\" class=\"form-control\" id=\"expiration\" name=\"expiration\"> <small class=\"form-text text-muted\">Leave empty for no expiration</small></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleCreateServiceAccount()\">Create</button></div></div></div></div><!-- Service Account Details Modal --><div class=\"modal fade\" id=\"saDetailsModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-robot me-2\"></i>Service Account Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\" id=\"saDetailsContent\"><!-- Content will be loaded dynamically --></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- Credentials Display Modal --><div class=\"modal fade\" id=\"credentialsModal\" tabindex=\"-1\" role=\"dialog\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header bg-success text-white\"><h5 class=\"modal-title\"><i class=\"fas fa-check-circle me-2\"></i>Service Account Created Successfully</h5></div><div class=\"modal-body\"><div class=\"alert alert-warning\"><i class=\"fas fa-exclamation-triangle me-2\"></i> <strong>Important:</strong> This is the only time you will see the secret access key. Please save it securely.</div><div class=\"mb-4\"><h6 class=\"text-muted mb-3\">AWS CLI Configuration</h6><p class=\"text-muted small\">Use these credentials to configure AWS CLI or SDKs:</p><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_ACCESS_KEY_ID</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displayAccessKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyCredentialToClipboard(this, 'displayAccessKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_SECRET_ACCESS_KEY</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displaySecretKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyCredentialToClipboard(this, 'displaySecretKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div></div><div class=\"bg-light p-3 rounded\"><h6 class=\"text-muted mb-2\">Example AWS CLI Usage:</h6><div class=\"font-monospace small\"><div>export AWS_ACCESS_KEY_ID=<span id=\"exampleAccessKey\"></span></div><div>export AWS_SECRET_ACCESS_KEY=<span id=\"exampleSecretKey\"></span></div><div>export AWS_ENDPOINT_URL=http://localhost:8333</div><div class=\"mt-2\"># List buckets</div><div>aws s3 ls</div><div class=\"mt-2\"># Upload a file</div><div>aws s3 cp myfile.txt s3://mybucket/</div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-primary\" onclick=\"closeCredentialsModal()\"><i class=\"fas fa-check me-1\"></i>I have saved the credentials</button></div></div></div></div><!-- JavaScript for service account management --><script>\n        document.addEventListener('DOMContentLoaded', function() {\n            document.addEventListener('click', function(e) {\n                const button = e.target.closest('[data-action]');\n                if (!button) return;\n                \n                const action = button.getAttribute('data-action');\n                const saId = button.getAttribute('data-sa-id');\n                \n                switch (action) {\n                    case 'show-sa-details':\n                        showSADetails(saId);\n                        break;\n                    case 'toggle-sa-status':\n                        toggleSAStatus(saId, button.getAttribute('data-current-status'));\n                        break;\n                    case 'delete-sa':\n                        deleteSA(saId);\n                        break;\n                }\n            });\n        });\n\n        async function showSADetails(id) {\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`);\n                if (response.ok) {\n                    const sa = await response.json();\n                    document.getElementById('saDetailsContent').innerHTML = createSADetailsContent(sa);\n                    const modal = new bootstrap.Modal(document.getElementById('saDetailsModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load service account details');\n                }\n            } catch (error) {\n                console.error('Error loading service account details:', error);\n                showErrorMessage('Failed to load service account details');\n            }\n        }\n\n        async function toggleSAStatus(id, currentStatus) {\n            const newStatus = currentStatus === 'Active' ? 'Inactive' : 'Active';\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`, {\n                    method: 'PUT',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ status: newStatus })\n                });\n                \n                if (response.ok) {\n                    showSuccessMessage(`Service account ${newStatus === 'Active' ? 'activated' : 'deactivated'}`);\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update status: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error updating status:', error);\n                showErrorMessage('Failed to update status: ' + error.message);\n            }\n        }\n\n        async function deleteSA(id) {\n            if (confirm('Are you sure you want to delete this service account? This action cannot be undone.')) {\n                try {\n                    const response = await fetch(`/api/service-accounts/${id}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('Service account deleted successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting service account:', error);\n                    showErrorMessage('Failed to delete: ' + error.message);\n                }\n            }\n        }\n\n        async function handleCreateServiceAccount() {\n            const form = document.getElementById('createSAForm');\n            const formData = new FormData(form);\n            \n            const saData = {\n                parent_user: formData.get('parent_user'),\n                description: formData.get('description')\n            };\n            \n            // Handle expiration if set\n            const expiration = formData.get('expiration');\n            if (expiration) {\n                // Validate the date before using it\n                const date = new Date(expiration);\n                const now = new Date();\n                \n                if (isNaN(date.getTime())) {\n                    showErrorMessage('Invalid expiration date format');\n                    return;\n                }\n                \n                // Ensure expiration is in the future\n                if (date <= now) {\n                    showErrorMessage('Expiration date must be in the future');\n                    return;\n                }\n                \n                saData.expiration = date.toISOString();\n            }\n            \n            try {\n                const response = await fetch('/api/service-accounts', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify(saData)\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    \n                    // Hide create modal\n                    const createModal = bootstrap.Modal.getInstance(document.getElementById('createServiceAccountModal'));\n                    createModal.hide();\n                    form.reset();\n                    \n                    // Show credentials if returned\n                    if (result.service_account && result.service_account.secret_access_key) {\n                        showCredentials(result.service_account);\n                    } else {\n                        showSuccessMessage('Service account created successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    }\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create service account: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating service account:', error);\n                showErrorMessage('Failed to create service account: ' + error.message);\n            }\n        }\n\n        function showCredentials(serviceAccount) {\n            // Populate the credentials modal\n            document.getElementById('displayAccessKey').value = serviceAccount.access_key_id;\n            document.getElementById('displaySecretKey').value = serviceAccount.secret_access_key;\n            document.getElementById('exampleAccessKey').textContent = serviceAccount.access_key_id;\n            document.getElementById('exampleSecretKey').textContent = serviceAccount.secret_access_key;\n            \n            // Show the modal\n            const credentialsModal = new bootstrap.Modal(document.getElementById('credentialsModal'));\n            credentialsModal.show();\n        }\n\n        function closeCredentialsModal() {\n            const modal = bootstrap.Modal.getInstance(document.getElementById('credentialsModal'));\n            modal.hide();\n            // Reload to show the new service account in the list\n            setTimeout(() => window.location.reload(), 500);\n        }\n\n        function copyCredentialToClipboard(button, elementId) {\n            const element = document.getElementById(elementId);\n            const textToCopy = element.value;\n            \n            // Use modern Clipboard API if available\n            if (navigator.clipboard && navigator.clipboard.writeText) {\n                 navigator.clipboard.writeText(textToCopy).then(() => {\n                     showSuccessMessage('Copied to clipboard!');\n                 }).catch(err => {\n                     console.warn('Clipboard API failed:', err);\n                     // Fallback\n                     fallbackCopyTextToClipboard(element);\n                 });\n            } else {\n                // Fallback for older browsers or non-secure contexts\n                fallbackCopyTextToClipboard(element);\n            }\n            \n            // Visual feedback\n            const originalHTML = button.innerHTML;\n            \n            button.innerHTML = '<i class=\"fas fa-check\"></i>';\n            button.classList.remove('btn-outline-secondary');\n            button.classList.add('btn-success');\n            \n            setTimeout(() => {\n                button.innerHTML = originalHTML;\n                button.classList.remove('btn-success');\n                button.classList.add('btn-outline-secondary');\n            }, 1000);\n        }\n\n        function fallbackCopyTextToClipboard(element) {\n            element.select();\n            element.setSelectionRange(0, 99999); // For mobile devices\n            \n            try {\n                const successful = document.execCommand('copy');\n                if (successful) {\n                    showSuccessMessage('Copied to clipboard!');\n                } else {\n                    showErrorMessage('Failed to copy to clipboard');\n                }\n            } catch (err) {\n                console.error('Fallback copy failed:', err);\n                showErrorMessage('Failed to copy to clipboard');\n            }\n            \n            // Clear selection\n            window.getSelection().removeAllRanges();\n        }\n\n\n        function createSADetailsContent(sa) {\n            // Create DOM elements safely to prevent XSS\n            const container = document.createElement('div');\n            container.className = 'row';\n            \n            // Basic Information column\n            const col1 = document.createElement('div');\n            col1.className = 'col-md-6';\n            \n            const h6_1 = document.createElement('h6');\n            h6_1.className = 'text-muted';\n            h6_1.textContent = 'Basic Information';\n            col1.appendChild(h6_1);\n            \n            const table1 = document.createElement('table');\n            table1.className = 'table table-sm';\n            \n            // ID row\n            const idRow = document.createElement('tr');\n            idRow.innerHTML = '<td><strong>ID:</strong></td><td><code></code></td>';\n            idRow.querySelector('code').textContent = sa.id || '';\n            table1.appendChild(idRow);\n            \n            // Parent User row\n            const parentRow = document.createElement('tr');\n            parentRow.innerHTML = '<td><strong>Parent User:</strong></td><td></td>';\n            parentRow.querySelectorAll('td')[1].textContent = sa.parent_user || '';\n            table1.appendChild(parentRow);\n            \n            // Access Key row\n            const keyRow = document.createElement('tr');\n            keyRow.innerHTML = '<td><strong>Access Key:</strong></td><td><code></code></td>';\n            keyRow.querySelector('code').textContent = sa.access_key_id || '';\n            table1.appendChild(keyRow);\n            \n            // Status row\n            const statusRow = document.createElement('tr');\n            const statusTd1 = document.createElement('td');\n            statusTd1.innerHTML = '<strong>Status:</strong>';\n            const statusTd2 = document.createElement('td');\n            const statusBadge = document.createElement('span');\n            statusBadge.className = sa.status === 'Active' ? 'badge bg-success' : 'badge bg-secondary';\n            statusBadge.textContent = sa.status || 'Unknown';\n            statusTd2.appendChild(statusBadge);\n            statusRow.appendChild(statusTd1);\n            statusRow.appendChild(statusTd2);\n            table1.appendChild(statusRow);\n            \n            col1.appendChild(table1);\n            container.appendChild(col1);\n            \n            // Details column\n            const col2 = document.createElement('div');\n            col2.className = 'col-md-6';\n            \n            const h6_2 = document.createElement('h6');\n            h6_2.className = 'text-muted';\n            h6_2.textContent = 'Details';\n            col2.appendChild(h6_2);\n            \n            const table2 = document.createElement('table');\n            table2.className = 'table table-sm';\n            \n            // Description row\n            const descRow = document.createElement('tr');\n            descRow.innerHTML = '<td><strong>Description:</strong></td><td></td>';\n            descRow.querySelectorAll('td')[1].textContent = sa.description || 'Not set';\n            table2.appendChild(descRow);\n            \n            // Created row\n            const createdRow = document.createElement('tr');\n            createdRow.innerHTML = '<td><strong>Created:</strong></td><td></td>';\n            try {\n                createdRow.querySelectorAll('td')[1].textContent = new Date(sa.create_date).toLocaleString();\n            } catch (e) {\n                createdRow.querySelectorAll('td')[1].textContent = 'Invalid date';\n            }\n            table2.appendChild(createdRow);\n            \n            // Expiration row\n            const expRow = document.createElement('tr');\n            expRow.innerHTML = '<td><strong>Expires:</strong></td><td></td>';\n            expRow.querySelectorAll('td')[1].textContent = sa.expiration || 'Never';\n            table2.appendChild(expRow);\n            \n            col2.appendChild(table2);\n            container.appendChild(col2);\n            \n            return container.outerHTML;\n        }\n\n\n        function showSuccessMessage(message) {\n            showToast(message, 'success');\n        }\n\n        function showErrorMessage(message) {\n            showToast(message, 'danger');\n        }\n\n        function showToast(message, type) {\n            // Create toast container if it doesn't exist\n            let toastContainer = document.getElementById('toastContainer');\n            if (!toastContainer) {\n                toastContainer = document.createElement('div');\n                toastContainer.id = 'toastContainer';\n                toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';\n                toastContainer.style.zIndex = '9999';\n                document.body.appendChild(toastContainer);\n            }\n\n            // Create toast element\n            const toastId = 'toast-' + Date.now();\n            const toastHTML = `\n                <div id=\"${toastId}\" class=\"toast align-items-center text-white bg-${type} border-0\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n                    <div class=\"d-flex\">\n                        <div class=\"toast-body\">\n                            ${escapeHtml(message)}\n                        </div>\n                        <button type=\"button\" class=\"btn-close btn-close-white me-2 m-auto\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n                    </div>\n                </div>\n            `;\n            \n            toastContainer.insertAdjacentHTML('beforeend', toastHTML);\n            const toastElement = document.getElementById(toastId);\n            const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 5000 });\n            toast.show();\n            \n            // Remove toast element after it's hidden\n            toastElement.addEventListener('hidden.bs.toast', () => {\n                toastElement.remove();\n            });\n        }\n\n        function escapeHtml(text) {\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</select> <small class=\"form-text text-muted\">The service account will inherit permissions from this user</small></div><div class=\"mb-3\"><label for=\"description\" class=\"form-label\">Description</label> <textarea class=\"form-control\" id=\"description\" name=\"description\" rows=\"2\" placeholder=\"What is this service account used for?\"></textarea></div><div class=\"mb-3\"><label for=\"expiration\" class=\"form-label\">Expiration (optional)</label> <input type=\"datetime-local\" class=\"form-control\" id=\"expiration\" name=\"expiration\"> <small class=\"form-text text-muted\">Leave empty for no expiration</small></div></form></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"button\" class=\"btn btn-primary\" onclick=\"handleCreateServiceAccount()\">Create</button></div></div></div></div><!-- Service Account Details Modal --><div class=\"modal fade\" id=\"saDetailsModal\" tabindex=\"-1\" role=\"dialog\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\"><i class=\"fas fa-robot me-2\"></i>Service Account Details</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\"></button></div><div class=\"modal-body\" id=\"saDetailsContent\"><!-- Content will be loaded dynamically --></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><!-- Credentials Display Modal --><div class=\"modal fade\" id=\"credentialsModal\" tabindex=\"-1\" role=\"dialog\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\"><div class=\"modal-dialog modal-lg\" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header bg-success text-white\"><h5 class=\"modal-title\"><i class=\"fas fa-check-circle me-2\"></i>Service Account Created Successfully</h5></div><div class=\"modal-body\"><div class=\"alert alert-warning\"><i class=\"fas fa-exclamation-triangle me-2\"></i> <strong>Important:</strong> This is the only time you will see the secret access key. Please save it securely.</div><div class=\"mb-4\"><h6 class=\"text-muted mb-3\">AWS CLI Configuration</h6><p class=\"text-muted small\">Use these credentials to configure AWS CLI or SDKs:</p><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_ACCESS_KEY_ID</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displayAccessKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyCredentialToClipboard(this, 'displayAccessKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div><div class=\"mb-3\"><label class=\"form-label fw-bold\">AWS_SECRET_ACCESS_KEY</label><div class=\"input-group\"><input type=\"text\" class=\"form-control font-monospace\" id=\"displaySecretKey\" readonly> <button class=\"btn btn-outline-secondary\" type=\"button\" onclick=\"copyCredentialToClipboard(this, 'displaySecretKey')\"><i class=\"fas fa-copy\"></i> Copy</button></div></div></div><div class=\"bg-light p-3 rounded\"><h6 class=\"text-muted mb-2\">Example AWS CLI Usage:</h6><div class=\"font-monospace small\"><div>export AWS_ACCESS_KEY_ID=<span id=\"exampleAccessKey\"></span></div><div>export AWS_SECRET_ACCESS_KEY=<span id=\"exampleSecretKey\"></span></div><div>export AWS_ENDPOINT_URL=http://localhost:8333</div><div class=\"mt-2\"># List buckets</div><div>aws s3 ls</div><div class=\"mt-2\"># Upload a file</div><div>aws s3 cp myfile.txt s3://mybucket/</div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-primary\" onclick=\"closeCredentialsModal()\"><i class=\"fas fa-check me-1\"></i>I have saved the credentials</button></div></div></div></div><!-- JavaScript for service account management --><script>\n        document.addEventListener('DOMContentLoaded', function() {\n            document.addEventListener('click', function(e) {\n                const button = e.target.closest('[data-action]');\n                if (!button) return;\n                \n                const action = button.getAttribute('data-action');\n                const saId = button.getAttribute('data-sa-id');\n                \n                switch (action) {\n                    case 'show-sa-details':\n                        showSADetails(saId);\n                        break;\n                    case 'toggle-sa-status':\n                        toggleSAStatus(saId, button.getAttribute('data-current-status'));\n                        break;\n                    case 'delete-sa':\n                        deleteSA(saId);\n                        break;\n                }\n            });\n        });\n\n        async function showSADetails(id) {\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`);\n                if (response.ok) {\n                    const sa = await response.json();\n                    document.getElementById('saDetailsContent').innerHTML = createSADetailsContent(sa);\n                    const modal = new bootstrap.Modal(document.getElementById('saDetailsModal'));\n                    modal.show();\n                } else {\n                    showErrorMessage('Failed to load service account details');\n                }\n            } catch (error) {\n                console.error('Error loading service account details:', error);\n                showErrorMessage('Failed to load service account details');\n            }\n        }\n\n        async function toggleSAStatus(id, currentStatus) {\n            const newStatus = currentStatus === 'Active' ? 'Inactive' : 'Active';\n            try {\n                const response = await fetch(`/api/service-accounts/${id}`, {\n                    method: 'PUT',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify({ status: newStatus })\n                });\n                \n                if (response.ok) {\n                    showSuccessMessage(`Service account ${newStatus === 'Active' ? 'activated' : 'deactivated'}`);\n                    setTimeout(() => window.location.reload(), 1000);\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to update status: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error updating status:', error);\n                showErrorMessage('Failed to update status: ' + error.message);\n            }\n        }\n\n        async function deleteSA(id) {\n            showDeleteConfirm(id, async function() {\n                try {\n                    const response = await fetch(`/api/service-accounts/${id}`, {\n                        method: 'DELETE'\n                    });\n                    \n                    if (response.ok) {\n                        showSuccessMessage('Service account deleted successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    } else {\n                        const error = await response.json();\n                        showErrorMessage('Failed to delete: ' + (error.error || 'Unknown error'));\n                    }\n                } catch (error) {\n                    console.error('Error deleting service account:', error);\n                    showErrorMessage('Failed to delete: ' + error.message);\n                }\n            }, 'Are you sure you want to delete this service account? This action cannot be undone.');\n        }\n\n        async function handleCreateServiceAccount() {\n            const form = document.getElementById('createSAForm');\n            const formData = new FormData(form);\n            \n            const saData = {\n                parent_user: formData.get('parent_user'),\n                description: formData.get('description')\n            };\n            \n            // Handle expiration if set\n            const expiration = formData.get('expiration');\n            if (expiration) {\n                // Validate the date before using it\n                const date = new Date(expiration);\n                const now = new Date();\n                \n                if (isNaN(date.getTime())) {\n                    showErrorMessage('Invalid expiration date format');\n                    return;\n                }\n                \n                // Ensure expiration is in the future\n                if (date <= now) {\n                    showErrorMessage('Expiration date must be in the future');\n                    return;\n                }\n                \n                saData.expiration = date.toISOString();\n            }\n            \n            try {\n                const response = await fetch('/api/service-accounts', {\n                    method: 'POST',\n                    headers: { 'Content-Type': 'application/json' },\n                    body: JSON.stringify(saData)\n                });\n                \n                if (response.ok) {\n                    const result = await response.json();\n                    \n                    // Hide create modal\n                    const createModal = bootstrap.Modal.getInstance(document.getElementById('createServiceAccountModal'));\n                    createModal.hide();\n                    form.reset();\n                    \n                    // Show credentials if returned\n                    if (result.service_account && result.service_account.secret_access_key) {\n                        showCredentials(result.service_account);\n                    } else {\n                        showSuccessMessage('Service account created successfully');\n                        setTimeout(() => window.location.reload(), 1000);\n                    }\n                } else {\n                    const error = await response.json();\n                    showErrorMessage('Failed to create service account: ' + (error.error || 'Unknown error'));\n                }\n            } catch (error) {\n                console.error('Error creating service account:', error);\n                showErrorMessage('Failed to create service account: ' + error.message);\n            }\n        }\n\n        function showCredentials(serviceAccount) {\n            // Populate the credentials modal\n            document.getElementById('displayAccessKey').value = serviceAccount.access_key_id;\n            document.getElementById('displaySecretKey').value = serviceAccount.secret_access_key;\n            document.getElementById('exampleAccessKey').textContent = serviceAccount.access_key_id;\n            document.getElementById('exampleSecretKey').textContent = serviceAccount.secret_access_key;\n            \n            // Show the modal\n            const credentialsModal = new bootstrap.Modal(document.getElementById('credentialsModal'));\n            credentialsModal.show();\n        }\n\n        function closeCredentialsModal() {\n            const modal = bootstrap.Modal.getInstance(document.getElementById('credentialsModal'));\n            modal.hide();\n            // Reload to show the new service account in the list\n            setTimeout(() => window.location.reload(), 500);\n        }\n\n        function copyCredentialToClipboard(button, elementId) {\n            const element = document.getElementById(elementId);\n            const textToCopy = element.value;\n            \n            // Use modern Clipboard API if available\n            if (navigator.clipboard && navigator.clipboard.writeText) {\n                 navigator.clipboard.writeText(textToCopy).then(() => {\n                     showSuccessMessage('Copied to clipboard!');\n                 }).catch(err => {\n                     console.warn('Clipboard API failed:', err);\n                     // Fallback\n                     fallbackCopyTextToClipboard(element);\n                 });\n            } else {\n                // Fallback for older browsers or non-secure contexts\n                fallbackCopyTextToClipboard(element);\n            }\n            \n            // Visual feedback\n            const originalHTML = button.innerHTML;\n            \n            button.innerHTML = '<i class=\"fas fa-check\"></i>';\n            button.classList.remove('btn-outline-secondary');\n            button.classList.add('btn-success');\n            \n            setTimeout(() => {\n                button.innerHTML = originalHTML;\n                button.classList.remove('btn-success');\n                button.classList.add('btn-outline-secondary');\n            }, 1000);\n        }\n\n        function fallbackCopyTextToClipboard(element) {\n            element.select();\n            element.setSelectionRange(0, 99999); // For mobile devices\n            \n            try {\n                const successful = document.execCommand('copy');\n                if (successful) {\n                    showSuccessMessage('Copied to clipboard!');\n                } else {\n                    showErrorMessage('Failed to copy to clipboard');\n                }\n            } catch (err) {\n                console.error('Fallback copy failed:', err);\n                showErrorMessage('Failed to copy to clipboard');\n            }\n            \n            // Clear selection\n            window.getSelection().removeAllRanges();\n        }\n\n\n        function createSADetailsContent(sa) {\n            // Create DOM elements safely to prevent XSS\n            const container = document.createElement('div');\n            container.className = 'row';\n            \n            // Basic Information column\n            const col1 = document.createElement('div');\n            col1.className = 'col-md-6';\n            \n            const h6_1 = document.createElement('h6');\n            h6_1.className = 'text-muted';\n            h6_1.textContent = 'Basic Information';\n            col1.appendChild(h6_1);\n            \n            const table1 = document.createElement('table');\n            table1.className = 'table table-sm';\n            \n            // ID row\n            const idRow = document.createElement('tr');\n            idRow.innerHTML = '<td><strong>ID:</strong></td><td><code></code></td>';\n            idRow.querySelector('code').textContent = sa.id || '';\n            table1.appendChild(idRow);\n            \n            // Parent User row\n            const parentRow = document.createElement('tr');\n            parentRow.innerHTML = '<td><strong>Parent User:</strong></td><td></td>';\n            parentRow.querySelectorAll('td')[1].textContent = sa.parent_user || '';\n            table1.appendChild(parentRow);\n            \n            // Access Key row\n            const keyRow = document.createElement('tr');\n            keyRow.innerHTML = '<td><strong>Access Key:</strong></td><td><code></code></td>';\n            keyRow.querySelector('code').textContent = sa.access_key_id || '';\n            table1.appendChild(keyRow);\n            \n            // Status row\n            const statusRow = document.createElement('tr');\n            const statusTd1 = document.createElement('td');\n            statusTd1.innerHTML = '<strong>Status:</strong>';\n            const statusTd2 = document.createElement('td');\n            const statusBadge = document.createElement('span');\n            statusBadge.className = sa.status === 'Active' ? 'badge bg-success' : 'badge bg-secondary';\n            statusBadge.textContent = sa.status || 'Unknown';\n            statusTd2.appendChild(statusBadge);\n            statusRow.appendChild(statusTd1);\n            statusRow.appendChild(statusTd2);\n            table1.appendChild(statusRow);\n            \n            col1.appendChild(table1);\n            container.appendChild(col1);\n            \n            // Details column\n            const col2 = document.createElement('div');\n            col2.className = 'col-md-6';\n            \n            const h6_2 = document.createElement('h6');\n            h6_2.className = 'text-muted';\n            h6_2.textContent = 'Details';\n            col2.appendChild(h6_2);\n            \n            const table2 = document.createElement('table');\n            table2.className = 'table table-sm';\n            \n            // Description row\n            const descRow = document.createElement('tr');\n            descRow.innerHTML = '<td><strong>Description:</strong></td><td></td>';\n            descRow.querySelectorAll('td')[1].textContent = sa.description || 'Not set';\n            table2.appendChild(descRow);\n            \n            // Created row\n            const createdRow = document.createElement('tr');\n            createdRow.innerHTML = '<td><strong>Created:</strong></td><td></td>';\n            try {\n                createdRow.querySelectorAll('td')[1].textContent = new Date(sa.create_date).toLocaleString();\n            } catch (e) {\n                createdRow.querySelectorAll('td')[1].textContent = 'Invalid date';\n            }\n            table2.appendChild(createdRow);\n            \n            // Expiration row\n            const expRow = document.createElement('tr');\n            expRow.innerHTML = '<td><strong>Expires:</strong></td><td></td>';\n            expRow.querySelectorAll('td')[1].textContent = sa.expiration || 'Never';\n            table2.appendChild(expRow);\n            \n            col2.appendChild(table2);\n            container.appendChild(col2);\n            \n            return container.outerHTML;\n        }\n\n\n        function showSuccessMessage(message) {\n            showToast(message, 'success');\n        }\n\n        function showErrorMessage(message) {\n            showToast(message, 'danger');\n        }\n\n        function showToast(message, type) {\n            // Create toast container if it doesn't exist\n            let toastContainer = document.getElementById('toastContainer');\n            if (!toastContainer) {\n                toastContainer = document.createElement('div');\n                toastContainer.id = 'toastContainer';\n                toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';\n                toastContainer.style.zIndex = '9999';\n                document.body.appendChild(toastContainer);\n            }\n\n            // Create toast element\n            const toastId = 'toast-' + Date.now();\n            const toastHTML = `\n                <div id=\"${toastId}\" class=\"toast align-items-center text-white bg-${type} border-0\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n                    <div class=\"d-flex\">\n                        <div class=\"toast-body\">\n                            ${escapeHtml(message)}\n                        </div>\n                        <button type=\"button\" class=\"btn-close btn-close-white me-2 m-auto\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n                    </div>\n                </div>\n            `;\n            \n            toastContainer.insertAdjacentHTML('beforeend', toastHTML);\n            const toastElement = document.getElementById(toastId);\n            const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 5000 });\n            toast.show();\n            \n            // Remove toast element after it's hidden\n            toastElement.addEventListener('hidden.bs.toast', () => {\n                toastElement.remove();\n            });\n        }\n\n        function escapeHtml(text) {\n            const div = document.createElement('div');\n            div.textContent = text;\n            return div.innerHTML;\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/task_config.templ b/weed/admin/view/app/task_config.templ
index 81e089de6..41034cd09 100644
--- a/weed/admin/view/app/task_config.templ
+++ b/weed/admin/view/app/task_config.templ
@@ -104,13 +104,13 @@ templ TaskConfig(data *maintenance.TaskConfigData) {
 
     <script>
         function resetForm() {
-            if (confirm('Are you sure you want to reset all settings to their default values?')) {
+            showConfirm('Are you sure you want to reset all settings to their default values?', function() {
                 // Find all form inputs and reset them
                 const form = document.querySelector('form');
                 if (form) {
                     form.reset();
                 }
-            }
+            });
         }
 
         // Auto-save form data to localStorage for recovery
diff --git a/weed/admin/view/app/task_config_schema.templ b/weed/admin/view/app/task_config_schema.templ
index bc2f29661..91d46190f 100644
--- a/weed/admin/view/app/task_config_schema.templ
+++ b/weed/admin/view/app/task_config_schema.templ
@@ -127,7 +127,7 @@ templ TaskConfigSchema(data *maintenance.TaskConfigData, schema *tasks.TaskConfi
 
     <script>
         function resetToDefaults() {
-            if (confirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.')) {
+            showConfirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.', function() {
                 // Reset form fields to their default values
                 const form = document.getElementById('taskConfigForm');
                 const schemaFields = window.taskConfigSchema ? window.taskConfigSchema.fields : {};
@@ -154,7 +154,7 @@ templ TaskConfigSchema(data *maintenance.TaskConfigData, schema *tasks.TaskConfi
                         }
                     }
                 });
-            }
+            });
         }
 
         function convertSecondsToTaskIntervalValueUnit(totalSeconds) {
diff --git a/weed/admin/view/app/task_config_schema_templ.go b/weed/admin/view/app/task_config_schema_templ.go
index e28490b2a..ebe65a571 100644
--- a/weed/admin/view/app/task_config_schema_templ.go
+++ b/weed/admin/view/app/task_config_schema_templ.go
@@ -170,7 +170,7 @@ func TaskConfigSchema(data *maintenance.TaskConfigData, schema *tasks.TaskConfig
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div></div></div></div></div></div><script>\n        function resetToDefaults() {\n            if (confirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.')) {\n                // Reset form fields to their default values\n                const form = document.getElementById('taskConfigForm');\n                const schemaFields = window.taskConfigSchema ? window.taskConfigSchema.fields : {};\n                \n                Object.keys(schemaFields).forEach(fieldName => {\n                    const field = schemaFields[fieldName];\n                    const element = document.getElementById(fieldName);\n                    \n                    if (element && field.default_value !== undefined) {\n                        if (field.input_type === 'checkbox') {\n                            element.checked = field.default_value;\n                        } else if (field.input_type === 'interval') {\n                            // Handle interval fields with value and unit\n                            const valueElement = document.getElementById(fieldName + '_value');\n                            const unitElement = document.getElementById(fieldName + '_unit');\n                            if (valueElement && unitElement && field.default_value) {\n                                const defaultSeconds = field.default_value;\n                                const { value, unit } = convertSecondsToTaskIntervalValueUnit(defaultSeconds);\n                                valueElement.value = value;\n                                unitElement.value = unit;\n                            }\n                        } else {\n                            element.value = field.default_value;\n                        }\n                    }\n                });\n            }\n        }\n\n        function convertSecondsToTaskIntervalValueUnit(totalSeconds) {\n            if (totalSeconds === 0) {\n                return { value: 0, unit: 'minutes' };\n            }\n\n            // Check if it's evenly divisible by days\n            if (totalSeconds % (24 * 3600) === 0) {\n                return { value: totalSeconds / (24 * 3600), unit: 'days' };\n            }\n\n            // Check if it's evenly divisible by hours\n            if (totalSeconds % 3600 === 0) {\n                return { value: totalSeconds / 3600, unit: 'hours' };\n            }\n\n            // Default to minutes\n            return { value: totalSeconds / 60, unit: 'minutes' };\n        }\n\n        // Store schema data for JavaScript access (moved to after div is created)\n    </script><!-- Hidden element to store schema data --><div data-task-schema=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div></div></div></div></div></div><script>\n        function resetToDefaults() {\n            showConfirm('Are you sure you want to reset to default configuration? This will overwrite your current settings.', function() {\n                // Reset form fields to their default values\n                const form = document.getElementById('taskConfigForm');\n                const schemaFields = window.taskConfigSchema ? window.taskConfigSchema.fields : {};\n                \n                Object.keys(schemaFields).forEach(fieldName => {\n                    const field = schemaFields[fieldName];\n                    const element = document.getElementById(fieldName);\n                    \n                    if (element && field.default_value !== undefined) {\n                        if (field.input_type === 'checkbox') {\n                            element.checked = field.default_value;\n                        } else if (field.input_type === 'interval') {\n                            // Handle interval fields with value and unit\n                            const valueElement = document.getElementById(fieldName + '_value');\n                            const unitElement = document.getElementById(fieldName + '_unit');\n                            if (valueElement && unitElement && field.default_value) {\n                                const defaultSeconds = field.default_value;\n                                const { value, unit } = convertSecondsToTaskIntervalValueUnit(defaultSeconds);\n                                valueElement.value = value;\n                                unitElement.value = unit;\n                            }\n                        } else {\n                            element.value = field.default_value;\n                        }\n                    }\n                });\n            });\n        }\n\n        function convertSecondsToTaskIntervalValueUnit(totalSeconds) {\n            if (totalSeconds === 0) {\n                return { value: 0, unit: 'minutes' };\n            }\n\n            // Check if it's evenly divisible by days\n            if (totalSeconds % (24 * 3600) === 0) {\n                return { value: totalSeconds / (24 * 3600), unit: 'days' };\n            }\n\n            // Check if it's evenly divisible by hours\n            if (totalSeconds % 3600 === 0) {\n                return { value: totalSeconds / 3600, unit: 'hours' };\n            }\n\n            // Default to minutes\n            return { value: totalSeconds / 60, unit: 'minutes' };\n        }\n\n        // Store schema data for JavaScript access (moved to after div is created)\n    </script><!-- Hidden element to store schema data --><div data-task-schema=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/task_config_templ.go b/weed/admin/view/app/task_config_templ.go
index 59a56d30b..243b5816e 100644
--- a/weed/admin/view/app/task_config_templ.go
+++ b/weed/admin/view/app/task_config_templ.go
@@ -163,7 +163,7 @@ func TaskConfig(data *maintenance.TaskConfigData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</p></div></div></div></div></div></div></div><script>\n        function resetForm() {\n            if (confirm('Are you sure you want to reset all settings to their default values?')) {\n                // Find all form inputs and reset them\n                const form = document.querySelector('form');\n                if (form) {\n                    form.reset();\n                }\n            }\n        }\n\n        // Auto-save form data to localStorage for recovery\n        document.addEventListener('DOMContentLoaded', function() {\n            const form = document.querySelector('form');\n            if (form) {\n                const taskType = '{string(data.TaskType)}';\n                const storageKey = 'taskConfig_' + taskType;\n\n                // Load saved data\n                const savedData = localStorage.getItem(storageKey);\n                if (savedData) {\n                    try {\n                        const data = JSON.parse(savedData);\n                        Object.keys(data).forEach(key => {\n                            const input = form.querySelector(`[name=\"${key}\"]`);\n                            if (input) {\n                                if (input.type === 'checkbox') {\n                                    input.checked = data[key];\n                                } else {\n                                    input.value = data[key];\n                                }\n                            }\n                        });\n                    } catch (e) {\n                        console.warn('Failed to load saved configuration:', e);\n                    }\n                }\n\n                // Save data on input change\n                form.addEventListener('input', function() {\n                    const formData = new FormData(form);\n                    const data = {};\n                    for (let [key, value] of formData.entries()) {\n                        data[key] = value;\n                    }\n                    localStorage.setItem(storageKey, JSON.stringify(data));\n                });\n\n                // Clear saved data on successful submit\n                form.addEventListener('submit', function() {\n                    localStorage.removeItem(storageKey);\n                });\n            }\n        });\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</p></div></div></div></div></div></div></div><script>\n        function resetForm() {\n            showConfirm('Are you sure you want to reset all settings to their default values?', function() {\n                // Find all form inputs and reset them\n                const form = document.querySelector('form');\n                if (form) {\n                    form.reset();\n                }\n            });\n        }\n\n        // Auto-save form data to localStorage for recovery\n        document.addEventListener('DOMContentLoaded', function() {\n            const form = document.querySelector('form');\n            if (form) {\n                const taskType = '{string(data.TaskType)}';\n                const storageKey = 'taskConfig_' + taskType;\n\n                // Load saved data\n                const savedData = localStorage.getItem(storageKey);\n                if (savedData) {\n                    try {\n                        const data = JSON.parse(savedData);\n                        Object.keys(data).forEach(key => {\n                            const input = form.querySelector(`[name=\"${key}\"]`);\n                            if (input) {\n                                if (input.type === 'checkbox') {\n                                    input.checked = data[key];\n                                } else {\n                                    input.value = data[key];\n                                }\n                            }\n                        });\n                    } catch (e) {\n                        console.warn('Failed to load saved configuration:', e);\n                    }\n                }\n\n                // Save data on input change\n                form.addEventListener('input', function() {\n                    const formData = new FormData(form);\n                    const data = {};\n                    for (let [key, value] of formData.entries()) {\n                        data[key] = value;\n                    }\n                    localStorage.setItem(storageKey, JSON.stringify(data));\n                });\n\n                // Clear saved data on successful submit\n                form.addEventListener('submit', function() {\n                    localStorage.removeItem(storageKey);\n                });\n            }\n        });\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/task_config_templ.templ b/weed/admin/view/app/task_config_templ.templ
index 010f5782c..37d236868 100644
--- a/weed/admin/view/app/task_config_templ.templ
+++ b/weed/admin/view/app/task_config_templ.templ
@@ -121,9 +121,9 @@ templ TaskConfigTempl(data *TaskConfigTemplData) {
 
         // Reset form function
         function resetForm() {
-            if (confirm('Are you sure you want to reset all changes?')) {
+            showConfirm('Are you sure you want to reset all changes?', function() {
                 location.reload();
-            }
+            });
         }
 
         // Test configuration function
diff --git a/weed/admin/view/app/task_config_templ_templ.go b/weed/admin/view/app/task_config_templ_templ.go
index e037eb1cf..5b5d261b0 100644
--- a/weed/admin/view/app/task_config_templ_templ.go
+++ b/weed/admin/view/app/task_config_templ_templ.go
@@ -101,7 +101,7 @@ func TaskConfigTempl(data *TaskConfigTemplData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- Form actions --><div class=\"row\"><div class=\"col-12\"><div class=\"card\"><div class=\"card-body\"><div class=\"d-flex justify-content-between\"><div><button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i> Save Configuration</button> <button type=\"button\" class=\"btn btn-outline-secondary ms-2\" onclick=\"resetForm()\"><i class=\"fas fa-undo me-1\"></i> Reset</button></div><div><button type=\"button\" class=\"btn btn-outline-info\" onclick=\"testConfiguration()\"><i class=\"fas fa-play me-1\"></i> Test Configuration</button></div></div></div></div></div></div></form></div><script>\n        // Form validation\n        (function() {\n            'use strict';\n            window.addEventListener('load', function() {\n                var forms = document.getElementsByClassName('needs-validation');\n                var validation = Array.prototype.filter.call(forms, function(form) {\n                    form.addEventListener('submit', function(event) {\n                        if (form.checkValidity() === false) {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }\n                        form.classList.add('was-validated');\n                    }, false);\n                });\n            }, false);\n        })();\n\n        // Auto-save functionality\n        let autoSaveTimeout;\n        function autoSave() {\n            clearTimeout(autoSaveTimeout);\n            autoSaveTimeout = setTimeout(function() {\n                const formData = new FormData(document.querySelector('form'));\n                localStorage.setItem('task_config_' + '{data.TaskType}', JSON.stringify(Object.fromEntries(formData)));\n            }, 1000);\n        }\n\n        // Add auto-save listeners to all form inputs\n        document.addEventListener('DOMContentLoaded', function() {\n            const form = document.querySelector('form');\n            if (form) {\n                form.addEventListener('input', autoSave);\n                form.addEventListener('change', autoSave);\n            }\n        });\n\n        // Reset form function\n        function resetForm() {\n            if (confirm('Are you sure you want to reset all changes?')) {\n                location.reload();\n            }\n        }\n\n        // Test configuration function\n        function testConfiguration() {\n            const formData = new FormData(document.querySelector('form'));\n            \n            // Show loading state\n            const testBtn = document.querySelector('button[onclick=\"testConfiguration()\"]');\n            const originalContent = testBtn.innerHTML;\n            testBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin me-1\"></i>Testing...';\n            testBtn.disabled = true;\n            \n            fetch('/maintenance/config/{data.TaskType}/test', {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    alert('Configuration test successful!');\n                } else {\n                    alert('Configuration test failed: ' + data.error);\n                }\n            })\n            .catch(error => {\n                alert('Test failed: ' + error);\n            })\n            .finally(() => {\n                testBtn.innerHTML = originalContent;\n                testBtn.disabled = false;\n            });\n        }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- Form actions --><div class=\"row\"><div class=\"col-12\"><div class=\"card\"><div class=\"card-body\"><div class=\"d-flex justify-content-between\"><div><button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i> Save Configuration</button> <button type=\"button\" class=\"btn btn-outline-secondary ms-2\" onclick=\"resetForm()\"><i class=\"fas fa-undo me-1\"></i> Reset</button></div><div><button type=\"button\" class=\"btn btn-outline-info\" onclick=\"testConfiguration()\"><i class=\"fas fa-play me-1\"></i> Test Configuration</button></div></div></div></div></div></div></form></div><script>\n        // Form validation\n        (function() {\n            'use strict';\n            window.addEventListener('load', function() {\n                var forms = document.getElementsByClassName('needs-validation');\n                var validation = Array.prototype.filter.call(forms, function(form) {\n                    form.addEventListener('submit', function(event) {\n                        if (form.checkValidity() === false) {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }\n                        form.classList.add('was-validated');\n                    }, false);\n                });\n            }, false);\n        })();\n\n        // Auto-save functionality\n        let autoSaveTimeout;\n        function autoSave() {\n            clearTimeout(autoSaveTimeout);\n            autoSaveTimeout = setTimeout(function() {\n                const formData = new FormData(document.querySelector('form'));\n                localStorage.setItem('task_config_' + '{data.TaskType}', JSON.stringify(Object.fromEntries(formData)));\n            }, 1000);\n        }\n\n        // Add auto-save listeners to all form inputs\n        document.addEventListener('DOMContentLoaded', function() {\n            const form = document.querySelector('form');\n            if (form) {\n                form.addEventListener('input', autoSave);\n                form.addEventListener('change', autoSave);\n            }\n        });\n\n        // Reset form function\n        function resetForm() {\n            showConfirm('Are you sure you want to reset all changes?', function() {\n                location.reload();\n            });\n        }\n\n        // Test configuration function\n        function testConfiguration() {\n            const formData = new FormData(document.querySelector('form'));\n            \n            // Show loading state\n            const testBtn = document.querySelector('button[onclick=\"testConfiguration()\"]');\n            const originalContent = testBtn.innerHTML;\n            testBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin me-1\"></i>Testing...';\n            testBtn.disabled = true;\n            \n            fetch('/maintenance/config/{data.TaskType}/test', {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    alert('Configuration test successful!');\n                } else {\n                    alert('Configuration test failed: ' + data.error);\n                }\n            })\n            .catch(error => {\n                alert('Test failed: ' + error);\n            })\n            .finally(() => {\n                testBtn.innerHTML = originalContent;\n                testBtn.disabled = false;\n            });\n        }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/task_detail.templ b/weed/admin/view/app/task_detail.templ
index 6045a5301..784e6dddf 100644
--- a/weed/admin/view/app/task_detail.templ
+++ b/weed/admin/view/app/task_detail.templ
@@ -1056,7 +1056,7 @@ templ TaskDetail(data *maintenance.TaskDetailData) {
     }
 
     function cancelTask(taskId) {
-        if (confirm('Are you sure you want to cancel this task?')) {
+        showConfirm('Are you sure you want to cancel this task?', function() {
             fetch(`/api/maintenance/tasks/${taskId}/cancel`, {
                 method: 'POST',
                 headers: {
@@ -1076,7 +1076,7 @@ templ TaskDetail(data *maintenance.TaskDetailData) {
                 console.error('Error:', error);
                 alert('Error cancelling task');
             });
-        }
+        });
     }
 
     function refreshTaskLogs(taskId) {
diff --git a/weed/admin/view/app/task_detail_templ.go b/weed/admin/view/app/task_detail_templ.go
index eec5ba29c..9d403c331 100644
--- a/weed/admin/view/app/task_detail_templ.go
+++ b/weed/admin/view/app/task_detail_templ.go
@@ -1617,7 +1617,7 @@ func TaskDetail(data *maintenance.TaskDetailData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 201, "\" onclick=\"exportTaskDetail(this.getAttribute('data-task-id'))\"><i class=\"fas fa-download me-1\"></i> Export Details</button></div></div></div></div></div><!-- Task Logs Modal --><div class=\"modal fade\" id=\"taskLogsModal\" tabindex=\"-1\" aria-labelledby=\"taskLogsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-xl\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"taskLogsModalLabel\"><i class=\"fas fa-file-text me-2\"></i>Task Logs</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><div id=\"logsLoadingSpinner\" class=\"text-center py-4\" style=\"display: none;\"><div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading logs...</span></div><p class=\"mt-2\">Fetching logs from worker...</p></div><div id=\"logsError\" class=\"alert alert-danger\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle me-2\"></i> <span id=\"logsErrorMessage\"></span></div><div id=\"logsContent\" style=\"display: none;\"><div class=\"d-flex justify-content-between align-items-center mb-3\"><div><strong>Task:</strong> <span id=\"logsTaskId\"></span> |  <strong>Worker:</strong> <span id=\"logsWorkerId\"></span> | <strong>Entries:</strong> <span id=\"logsCount\"></span></div><div class=\"btn-group\"><button type=\"button\" class=\"btn btn-sm btn-outline-primary\" onclick=\"refreshModalLogs()\"><i class=\"fas fa-sync-alt me-1\"></i>Refresh</button> <button type=\"button\" class=\"btn btn-sm btn-outline-success\" onclick=\"downloadTaskLogs()\"><i class=\"fas fa-download me-1\"></i>Download</button></div></div><div class=\"card\"><div class=\"card-header\"><div class=\"d-flex justify-content-between align-items-center\"><span>Log Entries (Last 100)</span> <small class=\"text-muted\">Newest entries first</small></div></div><div class=\"card-body p-0\"><pre id=\"logsDisplay\" class=\"bg-dark text-light p-3 mb-0\" style=\"max-height: 400px; overflow-y: auto; font-size: 0.85rem; line-height: 1.4;\"></pre></div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><style>\n    .timeline-container {\n        position: relative;\n        padding: 20px 0;\n    }\n    \n    .timeline-progress {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        position: relative;\n        max-width: 100%;\n    }\n    \n    .timeline-step {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        flex: 1;\n        position: relative;\n    }\n    \n    .timeline-circle {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-weight: bold;\n        box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        z-index: 2;\n        position: relative;\n    }\n    \n    .timeline-circle.completed {\n        background-color: #28a745;\n        border: 3px solid #1e7e34;\n    }\n    \n    .timeline-circle.pending {\n        background-color: #6c757d;\n        border: 3px solid #495057;\n    }\n    \n    .timeline-connector {\n        position: absolute;\n        top: 20px;\n        left: 50%;\n        right: -50%;\n        height: 4px;\n        z-index: 1;\n        margin-left: 20px;\n        margin-right: 20px;\n    }\n    \n    .timeline-connector.completed {\n        background-color: #28a745;\n    }\n    \n    .timeline-connector:not(.completed) {\n        background-color: #dee2e6;\n    }\n    \n    .timeline-step:last-child .timeline-connector {\n        display: none;\n    }\n    \n    .timeline-label {\n        margin-top: 15px;\n        text-align: center;\n        min-height: 60px;\n    }\n    \n    .timeline-label strong {\n        display: block;\n        font-size: 0.9rem;\n        margin-bottom: 4px;\n    }\n    \n    .timeline-label small {\n        font-size: 0.75rem;\n        line-height: 1.2;\n    }\n    \n    @media (max-width: 768px) {\n        .timeline-progress {\n            flex-direction: column;\n            align-items: stretch;\n        }\n        \n        .timeline-step {\n            flex-direction: row;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n        \n        .timeline-circle {\n            margin-right: 15px;\n            flex-shrink: 0;\n        }\n        \n        .timeline-connector {\n            display: none;\n        }\n        \n        .timeline-label {\n            text-align: left;\n            margin-top: 0;\n            min-height: auto;\n        }\n    }\n    </style><script>\n    // Global variables for current logs modal\n    let currentTaskId = '';\n    let currentWorkerId = '';\n\n    function refreshPage() {\n        location.reload();\n    }\n\n    function showTaskLogs(taskId, workerId) {\n        currentTaskId = taskId;\n        currentWorkerId = workerId;\n        \n        // Show the modal\n        const modal = new bootstrap.Modal(document.getElementById('taskLogsModal'));\n        modal.show();\n        \n        // Load logs\n        loadTaskLogs(taskId, workerId);\n    }\n\n    function loadTaskLogs(taskId, workerId) {\n        // Show loading spinner\n        document.getElementById('logsLoadingSpinner').style.display = 'block';\n        document.getElementById('logsError').style.display = 'none';\n        document.getElementById('logsContent').style.display = 'none';\n        \n        // Update modal info\n        document.getElementById('logsTaskId').textContent = taskId;\n        document.getElementById('logsWorkerId').textContent = workerId;\n        \n        // Fetch logs from the API\n        fetch(`/api/maintenance/workers/${workerId}/logs?taskId=${taskId}&maxEntries=100`)\n        .then(response => response.json())\n        .then(data => {\n            document.getElementById('logsLoadingSpinner').style.display = 'none';\n            \n            if (data.error) {\n                showLogsError(data.error);\n                return;\n            }\n            \n            // Display logs\n            displayLogs(data.logs, data.count || 0);\n        })\n        .catch(error => {\n            document.getElementById('logsLoadingSpinner').style.display = 'none';\n            showLogsError('Failed to fetch logs: ' + error.message);\n        });\n    }\n\n    function displayLogs(logs, count) {\n        document.getElementById('logsError').style.display = 'none';\n        document.getElementById('logsContent').style.display = 'block';\n        document.getElementById('logsCount').textContent = count;\n        \n        const logsDisplay = document.getElementById('logsDisplay');\n        \n        if (!logs || logs.length === 0) {\n            logsDisplay.textContent = 'No logs found for this task.';\n            return;\n        }\n        \n        // Format and display logs with structured fields\n        let logText = '';\n        logs.forEach(entry => {\n            const timestamp = entry.timestamp ? new Date(entry.timestamp * 1000).toISOString() : 'N/A';\n            const level = entry.level || 'INFO';\n            const message = entry.message || '';\n            \n            logText += `[${timestamp}] ${level}: ${message}`;\n            \n            // Add structured fields if they exist\n            if (entry.fields && Object.keys(entry.fields).length > 0) {\n                const fieldsStr = Object.entries(entry.fields)\n                    .map(([key, value]) => `${key}=${value}`)\n                    .join(', ');\n                logText += ` | ${fieldsStr}`;\n            }\n            \n            // Add progress if available\n            if (entry.progress !== undefined && entry.progress !== null) {\n                logText += ` | progress=${entry.progress}%`;\n            }\n            \n            // Add status if available\n            if (entry.status) {\n                logText += ` | status=${entry.status}`;\n            }\n            \n            logText += '\\n';\n        });\n        \n        logsDisplay.textContent = logText;\n        \n        // Scroll to top\n        logsDisplay.scrollTop = 0;\n    }\n\n    function showLogsError(errorMessage) {\n        document.getElementById('logsError').style.display = 'block';\n        document.getElementById('logsContent').style.display = 'none';\n        document.getElementById('logsErrorMessage').textContent = errorMessage;\n    }\n\n    function refreshModalLogs() {\n        if (currentTaskId && currentWorkerId) {\n            loadTaskLogs(currentTaskId, currentWorkerId);\n        }\n    }\n\n    function downloadTaskLogs() {\n        if (!currentTaskId || !currentWorkerId) {\n            alert('No task logs to download');\n            return;\n        }\n        \n        // Download all logs (without maxEntries limit)\n        const downloadUrl = `/api/maintenance/workers/${currentWorkerId}/logs?taskId=${currentTaskId}&maxEntries=0`;\n        \n        fetch(downloadUrl)\n        .then(response => response.json())\n        .then(data => {\n            if (data.error) {\n                alert('Error downloading logs: ' + data.error);\n                return;\n            }\n            \n            // Convert logs to text format with structured fields\n            let logContent = '';\n            if (data.logs && data.logs.length > 0) {\n                data.logs.forEach(entry => {\n                    const timestamp = entry.timestamp ? new Date(entry.timestamp * 1000).toISOString() : 'N/A';\n                    const level = entry.level || 'INFO';\n                    const message = entry.message || '';\n                    \n                    logContent += `[${timestamp}] ${level}: ${message}`;\n                    \n                    // Add structured fields if they exist\n                    if (entry.fields && Object.keys(entry.fields).length > 0) {\n                        const fieldsStr = Object.entries(entry.fields)\n                            .map(([key, value]) => `${key}=${value}`)\n                            .join(', ');\n                        logContent += ` | ${fieldsStr}`;\n                    }\n                    \n                    // Add progress if available\n                    if (entry.progress !== undefined && entry.progress !== null) {\n                        logContent += ` | progress=${entry.progress}%`;\n                    }\n                    \n                    // Add status if available\n                    if (entry.status) {\n                        logContent += ` | status=${entry.status}`;\n                    }\n                    \n                    logContent += '\\n';\n                });\n            } else {\n                logContent = 'No logs found for this task.';\n            }\n            \n            // Create and download file\n            const blob = new Blob([logContent], { type: 'text/plain' });\n            const url = URL.createObjectURL(blob);\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `task-${currentTaskId}-logs.txt`;\n            link.click();\n            URL.revokeObjectURL(url);\n        })\n        .catch(error => {\n            alert('Error downloading logs: ' + error.message);\n        });\n    }\n\n    function cancelTask(taskId) {\n        if (confirm('Are you sure you want to cancel this task?')) {\n            fetch(`/api/maintenance/tasks/${taskId}/cancel`, {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application/json',\n                },\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    alert('Task cancelled successfully');\n                    location.reload();\n                } else {\n                    alert('Error cancelling task: ' + data.error);\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('Error cancelling task');\n            });\n        }\n    }\n\n    function refreshTaskLogs(taskId) {\n        fetch(`/api/maintenance/tasks/${taskId}/detail`)\n        .then(response => response.json())\n        .then(data => {\n            location.reload();\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error refreshing logs');\n        });\n    }\n\n    function exportTaskDetail(taskId) {\n        fetch(`/api/maintenance/tasks/${taskId}/detail`)\n        .then(response => response.json())\n        .then(data => {\n            const dataStr = JSON.stringify(data, null, 2);\n            const dataBlob = new Blob([dataStr], {type: 'application/json'});\n            const url = URL.createObjectURL(dataBlob);\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `task-${taskId}-detail.json`;\n            link.click();\n            URL.revokeObjectURL(url);\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error exporting task detail');\n        });\n    }\n\n    // Auto-refresh every 30 seconds for active tasks\n    if ('{string(data.Task.Status)}' === 'in_progress') {\n        setInterval(refreshPage, 30000);\n    }\n    </script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 201, "\" onclick=\"exportTaskDetail(this.getAttribute('data-task-id'))\"><i class=\"fas fa-download me-1\"></i> Export Details</button></div></div></div></div></div><!-- Task Logs Modal --><div class=\"modal fade\" id=\"taskLogsModal\" tabindex=\"-1\" aria-labelledby=\"taskLogsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-xl\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"taskLogsModalLabel\"><i class=\"fas fa-file-text me-2\"></i>Task Logs</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><div id=\"logsLoadingSpinner\" class=\"text-center py-4\" style=\"display: none;\"><div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading logs...</span></div><p class=\"mt-2\">Fetching logs from worker...</p></div><div id=\"logsError\" class=\"alert alert-danger\" style=\"display: none;\"><i class=\"fas fa-exclamation-triangle me-2\"></i> <span id=\"logsErrorMessage\"></span></div><div id=\"logsContent\" style=\"display: none;\"><div class=\"d-flex justify-content-between align-items-center mb-3\"><div><strong>Task:</strong> <span id=\"logsTaskId\"></span> |  <strong>Worker:</strong> <span id=\"logsWorkerId\"></span> | <strong>Entries:</strong> <span id=\"logsCount\"></span></div><div class=\"btn-group\"><button type=\"button\" class=\"btn btn-sm btn-outline-primary\" onclick=\"refreshModalLogs()\"><i class=\"fas fa-sync-alt me-1\"></i>Refresh</button> <button type=\"button\" class=\"btn btn-sm btn-outline-success\" onclick=\"downloadTaskLogs()\"><i class=\"fas fa-download me-1\"></i>Download</button></div></div><div class=\"card\"><div class=\"card-header\"><div class=\"d-flex justify-content-between align-items-center\"><span>Log Entries (Last 100)</span> <small class=\"text-muted\">Newest entries first</small></div></div><div class=\"card-body p-0\"><pre id=\"logsDisplay\" class=\"bg-dark text-light p-3 mb-0\" style=\"max-height: 400px; overflow-y: auto; font-size: 0.85rem; line-height: 1.4;\"></pre></div></div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button></div></div></div></div><style>\n    .timeline-container {\n        position: relative;\n        padding: 20px 0;\n    }\n    \n    .timeline-progress {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        position: relative;\n        max-width: 100%;\n    }\n    \n    .timeline-step {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        flex: 1;\n        position: relative;\n    }\n    \n    .timeline-circle {\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-weight: bold;\n        box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        z-index: 2;\n        position: relative;\n    }\n    \n    .timeline-circle.completed {\n        background-color: #28a745;\n        border: 3px solid #1e7e34;\n    }\n    \n    .timeline-circle.pending {\n        background-color: #6c757d;\n        border: 3px solid #495057;\n    }\n    \n    .timeline-connector {\n        position: absolute;\n        top: 20px;\n        left: 50%;\n        right: -50%;\n        height: 4px;\n        z-index: 1;\n        margin-left: 20px;\n        margin-right: 20px;\n    }\n    \n    .timeline-connector.completed {\n        background-color: #28a745;\n    }\n    \n    .timeline-connector:not(.completed) {\n        background-color: #dee2e6;\n    }\n    \n    .timeline-step:last-child .timeline-connector {\n        display: none;\n    }\n    \n    .timeline-label {\n        margin-top: 15px;\n        text-align: center;\n        min-height: 60px;\n    }\n    \n    .timeline-label strong {\n        display: block;\n        font-size: 0.9rem;\n        margin-bottom: 4px;\n    }\n    \n    .timeline-label small {\n        font-size: 0.75rem;\n        line-height: 1.2;\n    }\n    \n    @media (max-width: 768px) {\n        .timeline-progress {\n            flex-direction: column;\n            align-items: stretch;\n        }\n        \n        .timeline-step {\n            flex-direction: row;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n        \n        .timeline-circle {\n            margin-right: 15px;\n            flex-shrink: 0;\n        }\n        \n        .timeline-connector {\n            display: none;\n        }\n        \n        .timeline-label {\n            text-align: left;\n            margin-top: 0;\n            min-height: auto;\n        }\n    }\n    </style><script>\n    // Global variables for current logs modal\n    let currentTaskId = '';\n    let currentWorkerId = '';\n\n    function refreshPage() {\n        location.reload();\n    }\n\n    function showTaskLogs(taskId, workerId) {\n        currentTaskId = taskId;\n        currentWorkerId = workerId;\n        \n        // Show the modal\n        const modal = new bootstrap.Modal(document.getElementById('taskLogsModal'));\n        modal.show();\n        \n        // Load logs\n        loadTaskLogs(taskId, workerId);\n    }\n\n    function loadTaskLogs(taskId, workerId) {\n        // Show loading spinner\n        document.getElementById('logsLoadingSpinner').style.display = 'block';\n        document.getElementById('logsError').style.display = 'none';\n        document.getElementById('logsContent').style.display = 'none';\n        \n        // Update modal info\n        document.getElementById('logsTaskId').textContent = taskId;\n        document.getElementById('logsWorkerId').textContent = workerId;\n        \n        // Fetch logs from the API\n        fetch(`/api/maintenance/workers/${workerId}/logs?taskId=${taskId}&maxEntries=100`)\n        .then(response => response.json())\n        .then(data => {\n            document.getElementById('logsLoadingSpinner').style.display = 'none';\n            \n            if (data.error) {\n                showLogsError(data.error);\n                return;\n            }\n            \n            // Display logs\n            displayLogs(data.logs, data.count || 0);\n        })\n        .catch(error => {\n            document.getElementById('logsLoadingSpinner').style.display = 'none';\n            showLogsError('Failed to fetch logs: ' + error.message);\n        });\n    }\n\n    function displayLogs(logs, count) {\n        document.getElementById('logsError').style.display = 'none';\n        document.getElementById('logsContent').style.display = 'block';\n        document.getElementById('logsCount').textContent = count;\n        \n        const logsDisplay = document.getElementById('logsDisplay');\n        \n        if (!logs || logs.length === 0) {\n            logsDisplay.textContent = 'No logs found for this task.';\n            return;\n        }\n        \n        // Format and display logs with structured fields\n        let logText = '';\n        logs.forEach(entry => {\n            const timestamp = entry.timestamp ? new Date(entry.timestamp * 1000).toISOString() : 'N/A';\n            const level = entry.level || 'INFO';\n            const message = entry.message || '';\n            \n            logText += `[${timestamp}] ${level}: ${message}`;\n            \n            // Add structured fields if they exist\n            if (entry.fields && Object.keys(entry.fields).length > 0) {\n                const fieldsStr = Object.entries(entry.fields)\n                    .map(([key, value]) => `${key}=${value}`)\n                    .join(', ');\n                logText += ` | ${fieldsStr}`;\n            }\n            \n            // Add progress if available\n            if (entry.progress !== undefined && entry.progress !== null) {\n                logText += ` | progress=${entry.progress}%`;\n            }\n            \n            // Add status if available\n            if (entry.status) {\n                logText += ` | status=${entry.status}`;\n            }\n            \n            logText += '\\n';\n        });\n        \n        logsDisplay.textContent = logText;\n        \n        // Scroll to top\n        logsDisplay.scrollTop = 0;\n    }\n\n    function showLogsError(errorMessage) {\n        document.getElementById('logsError').style.display = 'block';\n        document.getElementById('logsContent').style.display = 'none';\n        document.getElementById('logsErrorMessage').textContent = errorMessage;\n    }\n\n    function refreshModalLogs() {\n        if (currentTaskId && currentWorkerId) {\n            loadTaskLogs(currentTaskId, currentWorkerId);\n        }\n    }\n\n    function downloadTaskLogs() {\n        if (!currentTaskId || !currentWorkerId) {\n            alert('No task logs to download');\n            return;\n        }\n        \n        // Download all logs (without maxEntries limit)\n        const downloadUrl = `/api/maintenance/workers/${currentWorkerId}/logs?taskId=${currentTaskId}&maxEntries=0`;\n        \n        fetch(downloadUrl)\n        .then(response => response.json())\n        .then(data => {\n            if (data.error) {\n                alert('Error downloading logs: ' + data.error);\n                return;\n            }\n            \n            // Convert logs to text format with structured fields\n            let logContent = '';\n            if (data.logs && data.logs.length > 0) {\n                data.logs.forEach(entry => {\n                    const timestamp = entry.timestamp ? new Date(entry.timestamp * 1000).toISOString() : 'N/A';\n                    const level = entry.level || 'INFO';\n                    const message = entry.message || '';\n                    \n                    logContent += `[${timestamp}] ${level}: ${message}`;\n                    \n                    // Add structured fields if they exist\n                    if (entry.fields && Object.keys(entry.fields).length > 0) {\n                        const fieldsStr = Object.entries(entry.fields)\n                            .map(([key, value]) => `${key}=${value}`)\n                            .join(', ');\n                        logContent += ` | ${fieldsStr}`;\n                    }\n                    \n                    // Add progress if available\n                    if (entry.progress !== undefined && entry.progress !== null) {\n                        logContent += ` | progress=${entry.progress}%`;\n                    }\n                    \n                    // Add status if available\n                    if (entry.status) {\n                        logContent += ` | status=${entry.status}`;\n                    }\n                    \n                    logContent += '\\n';\n                });\n            } else {\n                logContent = 'No logs found for this task.';\n            }\n            \n            // Create and download file\n            const blob = new Blob([logContent], { type: 'text/plain' });\n            const url = URL.createObjectURL(blob);\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `task-${currentTaskId}-logs.txt`;\n            link.click();\n            URL.revokeObjectURL(url);\n        })\n        .catch(error => {\n            alert('Error downloading logs: ' + error.message);\n        });\n    }\n\n    function cancelTask(taskId) {\n        showConfirm('Are you sure you want to cancel this task?', function() {\n            fetch(`/api/maintenance/tasks/${taskId}/cancel`, {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application/json',\n                },\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    alert('Task cancelled successfully');\n                    location.reload();\n                } else {\n                    alert('Error cancelling task: ' + data.error);\n                }\n            })\n            .catch(error => {\n                console.error('Error:', error);\n                alert('Error cancelling task');\n            });\n        });\n    }\n\n    function refreshTaskLogs(taskId) {\n        fetch(`/api/maintenance/tasks/${taskId}/detail`)\n        .then(response => response.json())\n        .then(data => {\n            location.reload();\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error refreshing logs');\n        });\n    }\n\n    function exportTaskDetail(taskId) {\n        fetch(`/api/maintenance/tasks/${taskId}/detail`)\n        .then(response => response.json())\n        .then(data => {\n            const dataStr = JSON.stringify(data, null, 2);\n            const dataBlob = new Blob([dataStr], {type: 'application/json'});\n            const url = URL.createObjectURL(dataBlob);\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `task-${taskId}-detail.json`;\n            link.click();\n            URL.revokeObjectURL(url);\n        })\n        .catch(error => {\n            console.error('Error:', error);\n            alert('Error exporting task detail');\n        });\n    }\n\n    // Auto-refresh every 30 seconds for active tasks\n    if ('{string(data.Task.Status)}' === 'in_progress') {\n        setInterval(refreshPage, 30000);\n    }\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/layout/layout.templ b/weed/admin/view/layout/layout.templ
index de74892f2..859984ca7 100644
--- a/weed/admin/view/layout/layout.templ
+++ b/weed/admin/view/layout/layout.templ
@@ -357,6 +357,8 @@ templ Layout(c *gin.Context, content templ.Component) {
 
     <!-- Bootstrap JS -->
     <script src="/static/js/bootstrap.bundle.min.js"></script>
+    <!-- Modal Alerts JS (replaces native alert/confirm) -->
+    <script src="/static/js/modal-alerts.js"></script>
     <!-- Custom JS -->
     <script src="/static/js/admin.js"></script>
 </body>
diff --git a/weed/admin/view/layout/layout_templ.go b/weed/admin/view/layout/layout_templ.go
index f718127f5..7724b995e 100644
--- a/weed/admin/view/layout/layout_templ.go
+++ b/weed/admin/view/layout/layout_templ.go
@@ -517,7 +517,7 @@ func Layout(c *gin.Context, content templ.Component) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</small></div></footer><!-- Bootstrap JS --><script src=\"/static/js/bootstrap.bundle.min.js\"></script><!-- Custom JS --><script src=\"/static/js/admin.js\"></script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</small></div></footer><!-- Bootstrap JS --><script src=\"/static/js/bootstrap.bundle.min.js\"></script><!-- Modal Alerts JS (replaces native alert/confirm) --><script src=\"/static/js/modal-alerts.js\"></script><!-- Custom JS --><script src=\"/static/js/admin.js\"></script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -553,7 +553,7 @@ func LoginForm(c *gin.Context, title string, errorMessage string) templ.Componen
 		var templ_7745c5c3_Var28 string
 		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 371, Col: 17}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 373, Col: 17}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
 		if templ_7745c5c3_Err != nil {
@@ -566,7 +566,7 @@ func LoginForm(c *gin.Context, title string, errorMessage string) templ.Componen
 		var templ_7745c5c3_Var29 string
 		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 385, Col: 57}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 387, Col: 57}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
 		if templ_7745c5c3_Err != nil {
@@ -584,7 +584,7 @@ func LoginForm(c *gin.Context, title string, errorMessage string) templ.Componen
 			var templ_7745c5c3_Var30 string
 			templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(errorMessage)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 392, Col: 45}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 394, Col: 45}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
 			if templ_7745c5c3_Err != nil {