From 3b9e367c1a31aa6332baba1b8e429ab17cbae905 Mon Sep 17 00:00:00 2001
From: Chris Lu <chris.lu@gmail.com>
Date: Mon, 2 Feb 2026 20:34:37 -0800
Subject: [PATCH] templ

---
 weed/admin/view/app/object_store_users_templ.go | 2 +-
 weed/admin/view/app/s3tables_buckets_templ.go   | 2 +-
 weed/admin/view/app/s3tables_tables_templ.go    | 2 +-
 weed/admin/view/layout/layout_templ.go          | 8 ++++----
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/weed/admin/view/app/object_store_users_templ.go b/weed/admin/view/app/object_store_users_templ.go
index d43c4854b..2c11fe0e2 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> <optgroup label=\"S3 Tables Permissions\"><option value=\"S3TablesAdmin\">S3 Tables Admin (Full Access)</option> <option value=\"CreateTableBucket\">Create Table Bucket</option> <option value=\"GetTableBucket\">Get Table Bucket</option> <option value=\"ListTableBuckets\">List Table Buckets</option> <option value=\"DeleteTableBucket\">Delete Table Bucket</option> <option value=\"PutTableBucketPolicy\">Put Table Bucket Policy</option> <option value=\"GetTableBucketPolicy\">Get Table Bucket Policy</option> <option value=\"DeleteTableBucketPolicy\">Delete Table Bucket Policy</option> <option value=\"CreateNamespace\">Create Namespace</option> <option value=\"GetNamespace\">Get Namespace</option> <option value=\"ListNamespaces\">List Namespaces</option> <option value=\"DeleteNamespace\">Delete Namespace</option> <option value=\"CreateTable\">Create Table</option> <option value=\"GetTable\">Get Table</option> <option value=\"ListTables\">List Tables</option> <option value=\"DeleteTable\">Delete Table</option> <option value=\"PutTablePolicy\">Put Table Policy</option> <option value=\"GetTablePolicy\">Get Table Policy</option> <option value=\"DeleteTablePolicy\">Delete Table Policy</option> <option value=\"TagResource\">Tag Resource</option> <option value=\"ListTagsForResource\">List Tags</option> <option value=\"UntagResource\">Untag Resource</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> <optgroup label=\"S3 Tables Permissions\"><option value=\"S3TablesAdmin\">S3 Tables Admin (Full Access)</option> <option value=\"CreateTableBucket\">Create Table Bucket</option> <option value=\"GetTableBucket\">Get Table Bucket</option> <option value=\"ListTableBuckets\">List Table Buckets</option> <option value=\"DeleteTableBucket\">Delete Table Bucket</option> <option value=\"PutTableBucketPolicy\">Put Table Bucket Policy</option> <option value=\"GetTableBucketPolicy\">Get Table Bucket Policy</option> <option value=\"DeleteTableBucketPolicy\">Delete Table Bucket Policy</option> <option value=\"CreateNamespace\">Create Namespace</option> <option value=\"GetNamespace\">Get Namespace</option> <option value=\"ListNamespaces\">List Namespaces</option> <option value=\"DeleteNamespace\">Delete Namespace</option> <option value=\"CreateTable\">Create Table</option> <option value=\"GetTable\">Get Table</option> <option value=\"ListTables\">List Tables</option> <option value=\"DeleteTable\">Delete Table</option> <option value=\"PutTablePolicy\">Put Table Policy</option> <option value=\"GetTablePolicy\">Get Table Policy</option> <option value=\"DeleteTablePolicy\">Delete Table Policy</option> <option value=\"TagResource\">Tag Resource</option> <option value=\"ListTagsForResource\">List Tags</option> <option value=\"UntagResource\">Untag Resource</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        const s3TablesPermissions = new Set([\n            'CreateTableBucket',\n            'GetTableBucket',\n            'ListTableBuckets',\n            'DeleteTableBucket',\n            'PutTableBucketPolicy',\n            'GetTableBucketPolicy',\n            'DeleteTableBucketPolicy',\n            'CreateNamespace',\n            'GetNamespace',\n            'ListNamespaces',\n            'DeleteNamespace',\n            'CreateTable',\n            'GetTable',\n            'ListTables',\n            'DeleteTable',\n            'PutTablePolicy',\n            'GetTablePolicy',\n            'DeleteTablePolicy',\n            'TagResource',\n            'ListTagsForResource',\n            'UntagResource'\n        ]);\n        function isS3TablesPermission(permission) {\n            return permission === 'S3TablesAdmin' || s3TablesPermissions.has(permission);\n        }\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 || []).map(bucket => ({ name: bucket.name, type: 's3' }));\n                    console.log('Loaded', availableBuckets.length, 'buckets');\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            try {\n                const response = await fetch('/api/s3tables/buckets');\n                if (response.ok) {\n                    const data = await response.json();\n                    const tableBuckets = (data.buckets || data.tableBuckets || []).map(bucket => ({ name: bucket.name, type: 's3tables' }));\n                    availableBuckets = availableBuckets.concat(tableBuckets);\n                } else {\n                    console.warn('Failed to load table buckets');\n                }\n            } catch (error) {\n                console.warn('Error loading table buckets:', error);\n            }\n            // Populate bucket selection dropdowns\n            populateBucketSelections();\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                    showAlert('Failed to load policies: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error loading policies:', error);\n                showAlert('Failed to load policies: ' + error.message, 'error');\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.type + ':' + bucket.name;\n                        option.textContent = bucket.type === 's3tables' ? `Table: ${bucket.name}` : 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.startsWith('s3tables:')) {\n                    const actionValue = action.slice('s3tables:'.length);\n                    if (actionValue === '*') {\n                        globalBucketPerms.push('S3TablesAdmin');\n                        return;\n                    }\n                    const parts = actionValue.split(':');\n                    const perm = parts[0];\n                    const bucket = parts.length > 1 ? parts.slice(1).join(':').replace(/\\/\\*$/, '') : '';\n                    if (bucket) {\n                        bucketActions.push({ permission: perm, bucketId: 's3tables:' + bucket });\n                    } else {\n                        globalBucketPerms.push(perm);\n                    }\n                } else 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, bucketId: 's3:' + 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.bucketId))];\n                \n                result.permissions = perms;\n                result.applyToAll = false;\n                result.specificBuckets = buckets;\n            }\n            \n            return result;\n        }\n\n        function parseBucketOptionValue(value) {\n            if (value.startsWith('s3tables:')) {\n                return { type: 's3tables', name: value.slice('s3tables:'.length) };\n            }\n            if (value.startsWith('s3:')) {\n                return { type: 's3', name: value.slice('s3:'.length) };\n            }\n            return { type: 's3', name: value };\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            const hasAdmin = selectedPerms.includes('Admin');\n            const hasS3TablesAdmin = selectedPerms.includes('S3TablesAdmin');\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                const actions = [];\n                if (hasAdmin) {\n                    actions.push('Admin');\n                }\n                if (hasS3TablesAdmin) {\n                    actions.push('s3tables:*');\n                }\n                selectedPerms.forEach(perm => {\n                    if (perm === 'Admin' || perm === 'S3TablesAdmin') {\n                        return;\n                    }\n                    if (isS3TablesPermission(perm)) {\n                        actions.push('s3tables:' + perm);\n                    } else {\n                        actions.push(perm);\n                    }\n                });\n                return actions;\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 = [...new Set(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                if (hasAdmin) {\n                    actions.push('Admin');\n                }\n                if (hasS3TablesAdmin) {\n                    actions.push('s3tables:*');\n                }\n                selectedPerms.forEach(perm => {\n                    if (perm === 'Admin' || perm === 'S3TablesAdmin') {\n                        return;\n                    }\n                    selectedBuckets.forEach(bucket => {\n                        const bucketInfo = parseBucketOptionValue(bucket);\n                        if (isS3TablesPermission(perm)) {\n                            if (bucketInfo.type === 's3tables') {\n                                actions.push('s3tables:' + perm + ':' + bucketInfo.name);\n                            }\n                        } else if (bucketInfo.type === 's3') {\n                            actions.push(perm + ':' + bucketInfo.name);\n                        }\n                    });\n                });\n                \n                return [...new Set(actions)];\n            }\n        }\n\n        // Show user details modal\n        async function showUserDetails(username) {\n            try {\n                const encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                    showAlert('Failed to load user details', 'error');\n                }\n            } catch (error) {\n                console.error('Error loading user details:', error);\n                showAlert('Failed to load user details', 'error');\n            }\n        }\n\n        // Edit user function\n        async function editUser(username) {\n            try {\n                const encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                    showAlert('Failed to load user details', 'error');\n                }\n            } catch (error) {\n                console.error('Error loading user:', error);\n                showAlert('Failed to load user details', 'error');\n            }\n        }\n\n        // Manage access keys function\n        async function manageAccessKeys(username) {\n            try {\n                const encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                    showAlert('Failed to load access keys', 'error');\n                }\n            } catch (error) {\n                console.error('Error loading access keys:', error);\n                showAlert('Failed to load access keys', 'error');\n            }\n        }\n\n        // Delete user function\n        async function deleteUser(username) {\n            showDeleteConfirm(username, async function() {\n                try {\n                    const encodedUsername = encodeURIComponent(username);\n                    const response = await fetch(`/api/users/${encodedUsername}`, {\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                    showAlert('Failed to create user: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error creating user:', error);\n                showAlert('Failed to create user: ' + error.message, 'error');\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                showAlert('Username is required', 'error');\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                showAlert('At least one permission must be selected', 'error');\n                return;\n            }\n            \n            // Check for null (validation failure from buildBucketPermissionsNew)\n            if (allActions === null) {\n                showAlert('Please select at least one bucket when using specific bucket permissions', 'error');\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 encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`, {\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                        showAlert('Failed to update user: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error updating user:', error);\n                showAlert('Failed to update user: ' + error.message, 'error');\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 encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                        showAlert('Failed to update access key status: ' + (error.error || 'Unknown error'), 'error');\n                    refreshAccessKeysList(username);\n                }\n            } catch (error) {\n                console.error('Error updating access key status:', error);\n                showAlert('Failed to update access key status: ' + error.message, 'error');\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 encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}/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                        showAlert('Failed to create access key: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error creating access key:', error);\n                showAlert('Failed to create access key: ' + error.message, 'error');\n            }\n        }\n\n        // Delete access key\n        async function deleteAccessKey(username, accessKey) {\n            showDeleteConfirm(accessKey, async function() {\n                try {\n                    const encodedUsername = encodeURIComponent(username);\n                    const encodedAccessKey = encodeURIComponent(accessKey);\n                    const response = await fetch(`/api/users/${encodedUsername}/access-keys/${encodedAccessKey}`, {\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            showAlert(message, 'error');\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> <optgroup label=\"S3 Tables Permissions\"><option value=\"S3TablesAdmin\">S3 Tables Admin (Full Access)</option> <option value=\"CreateTableBucket\">Create Table Bucket</option> <option value=\"GetTableBucket\">Get Table Bucket</option> <option value=\"ListTableBuckets\">List Table Buckets</option> <option value=\"DeleteTableBucket\">Delete Table Bucket</option> <option value=\"PutTableBucketPolicy\">Put Table Bucket Policy</option> <option value=\"GetTableBucketPolicy\">Get Table Bucket Policy</option> <option value=\"DeleteTableBucketPolicy\">Delete Table Bucket Policy</option> <option value=\"CreateNamespace\">Create Namespace</option> <option value=\"GetNamespace\">Get Namespace</option> <option value=\"ListNamespaces\">List Namespaces</option> <option value=\"DeleteNamespace\">Delete Namespace</option> <option value=\"CreateTable\">Create Table</option> <option value=\"GetTable\">Get Table</option> <option value=\"ListTables\">List Tables</option> <option value=\"DeleteTable\">Delete Table</option> <option value=\"PutTablePolicy\">Put Table Policy</option> <option value=\"GetTablePolicy\">Get Table Policy</option> <option value=\"DeleteTablePolicy\">Delete Table Policy</option> <option value=\"TagResource\">Tag Resource</option> <option value=\"ListTagsForResource\">List Tags</option> <option value=\"UntagResource\">Untag Resource</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> <optgroup label=\"S3 Tables Permissions\"><option value=\"S3TablesAdmin\">S3 Tables Admin (Full Access)</option> <option value=\"CreateTableBucket\">Create Table Bucket</option> <option value=\"GetTableBucket\">Get Table Bucket</option> <option value=\"ListTableBuckets\">List Table Buckets</option> <option value=\"DeleteTableBucket\">Delete Table Bucket</option> <option value=\"PutTableBucketPolicy\">Put Table Bucket Policy</option> <option value=\"GetTableBucketPolicy\">Get Table Bucket Policy</option> <option value=\"DeleteTableBucketPolicy\">Delete Table Bucket Policy</option> <option value=\"CreateNamespace\">Create Namespace</option> <option value=\"GetNamespace\">Get Namespace</option> <option value=\"ListNamespaces\">List Namespaces</option> <option value=\"DeleteNamespace\">Delete Namespace</option> <option value=\"CreateTable\">Create Table</option> <option value=\"GetTable\">Get Table</option> <option value=\"ListTables\">List Tables</option> <option value=\"DeleteTable\">Delete Table</option> <option value=\"PutTablePolicy\">Put Table Policy</option> <option value=\"GetTablePolicy\">Get Table Policy</option> <option value=\"DeleteTablePolicy\">Delete Table Policy</option> <option value=\"TagResource\">Tag Resource</option> <option value=\"ListTagsForResource\">List Tags</option> <option value=\"UntagResource\">Untag Resource</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        const s3TablesPermissions = new Set([\n            'CreateTableBucket',\n            'GetTableBucket',\n            'ListTableBuckets',\n            'DeleteTableBucket',\n            'PutTableBucketPolicy',\n            'GetTableBucketPolicy',\n            'DeleteTableBucketPolicy',\n            'CreateNamespace',\n            'GetNamespace',\n            'ListNamespaces',\n            'DeleteNamespace',\n            'CreateTable',\n            'GetTable',\n            'ListTables',\n            'DeleteTable',\n            'PutTablePolicy',\n            'GetTablePolicy',\n            'DeleteTablePolicy',\n            'TagResource',\n            'ListTagsForResource',\n            'UntagResource'\n        ]);\n        function isS3TablesPermission(permission) {\n            return permission === 'S3TablesAdmin' || s3TablesPermissions.has(permission);\n        }\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 || []).map(bucket => ({ name: bucket.name, type: 's3' }));\n                    console.log('Loaded', availableBuckets.length, 'buckets');\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            try {\n                const response = await fetch('/api/s3tables/buckets');\n                if (response.ok) {\n                    const data = await response.json();\n                    const tableBuckets = (data.buckets || data.tableBuckets || []).map(bucket => ({ name: bucket.name, type: 's3tables' }));\n                    availableBuckets = availableBuckets.concat(tableBuckets);\n                } else {\n                    console.warn('Failed to load table buckets');\n                }\n            } catch (error) {\n                console.warn('Error loading table buckets:', error);\n            }\n            // Populate bucket selection dropdowns\n            populateBucketSelections();\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                    showAlert('Failed to load policies: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error loading policies:', error);\n                showAlert('Failed to load policies: ' + error.message, 'error');\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.type + ':' + bucket.name;\n                        option.textContent = bucket.type === 's3tables' ? `Table: ${bucket.name}` : 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.startsWith('s3tables:')) {\n                    const actionValue = action.slice('s3tables:'.length);\n                    if (actionValue === '*') {\n                        globalBucketPerms.push('S3TablesAdmin');\n                        return;\n                    }\n                    const parts = actionValue.split(':');\n                    const perm = parts[0];\n                    const bucket = parts.length > 1 ? parts.slice(1).join(':').replace(/\\/\\*$/, '') : '';\n                    if (bucket) {\n                        bucketActions.push({ permission: perm, bucketId: 's3tables:' + bucket });\n                    } else {\n                        globalBucketPerms.push(perm);\n                    }\n                } else 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, bucketId: 's3:' + 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.bucketId))];\n                \n                result.permissions = perms;\n                result.applyToAll = false;\n                result.specificBuckets = buckets;\n            }\n            \n            return result;\n        }\n\n        function parseBucketOptionValue(value) {\n            if (value.startsWith('s3tables:')) {\n                return { type: 's3tables', name: value.slice('s3tables:'.length) };\n            }\n            if (value.startsWith('s3:')) {\n                return { type: 's3', name: value.slice('s3:'.length) };\n            }\n            return { type: 's3', name: value };\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            const hasAdmin = selectedPerms.includes('Admin');\n            const hasS3TablesAdmin = selectedPerms.includes('S3TablesAdmin');\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                const actions = [];\n                if (hasAdmin) {\n                    actions.push('Admin');\n                }\n                if (hasS3TablesAdmin) {\n                    actions.push('s3tables:*');\n                }\n                selectedPerms.forEach(perm => {\n                    if (perm === 'Admin' || perm === 'S3TablesAdmin') {\n                        return;\n                    }\n                    if (isS3TablesPermission(perm)) {\n                        actions.push('s3tables:' + perm);\n                    } else {\n                        actions.push(perm);\n                    }\n                });\n                return actions;\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 = [...new Set(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                if (hasAdmin) {\n                    actions.push('Admin');\n                }\n                if (hasS3TablesAdmin) {\n                    actions.push('s3tables:*');\n                }\n                selectedPerms.forEach(perm => {\n                    if (perm === 'Admin' || perm === 'S3TablesAdmin') {\n                        return;\n                    }\n                    selectedBuckets.forEach(bucket => {\n                        const bucketInfo = parseBucketOptionValue(bucket);\n                        if (isS3TablesPermission(perm)) {\n                            if (bucketInfo.type === 's3tables') {\n                                actions.push('s3tables:' + perm + ':' + bucketInfo.name);\n                            }\n                        } else if (bucketInfo.type === 's3') {\n                            actions.push(perm + ':' + bucketInfo.name);\n                        }\n                    });\n                });\n                \n                return [...new Set(actions)];\n            }\n        }\n\n        // Show user details modal\n        async function showUserDetails(username) {\n            try {\n                const encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                    showAlert('Failed to load user details', 'error');\n                }\n            } catch (error) {\n                console.error('Error loading user details:', error);\n                showAlert('Failed to load user details', 'error');\n            }\n        }\n\n        // Edit user function\n        async function editUser(username) {\n            try {\n                const encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                    showAlert('Failed to load user details', 'error');\n                }\n            } catch (error) {\n                console.error('Error loading user:', error);\n                showAlert('Failed to load user details', 'error');\n            }\n        }\n\n        // Manage access keys function\n        async function manageAccessKeys(username) {\n            try {\n                const encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                    showAlert('Failed to load access keys', 'error');\n                }\n            } catch (error) {\n                console.error('Error loading access keys:', error);\n                showAlert('Failed to load access keys', 'error');\n            }\n        }\n\n        // Delete user function\n        async function deleteUser(username) {\n            showDeleteConfirm(username, async function() {\n                try {\n                    const encodedUsername = encodeURIComponent(username);\n                    const response = await fetch(`/api/users/${encodedUsername}`, {\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            if (allActions === null) {\n                showAlert('Please select at least one bucket when using specific bucket permissions', 'error');\n                return;\n            }\n\n            if (!allActions || allActions.length === 0) {\n                showAlert('At least one permission must be selected', 'error');\n                return;\n            }\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                    showAlert('Failed to create user: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error creating user:', error);\n                showAlert('Failed to create user: ' + error.message, 'error');\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                showAlert('Username is required', 'error');\n                return;\n            }\n            \n            // Get permissions with bucket scope applied\n            const allActions = buildBucketPermissions('edit');\n            \n            // Check for null (validation failure from buildBucketPermissions)\n            if (allActions === null) {\n                showAlert('Please select at least one bucket when using specific bucket permissions', 'error');\n                return;\n            }\n            \n            // Validate that permissions are not empty\n            if (!allActions || allActions.length === 0) {\n                showAlert('At least one permission must be selected', 'error');\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 encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`, {\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                        showAlert('Failed to update user: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error updating user:', error);\n                showAlert('Failed to update user: ' + error.message, 'error');\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 encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}`);\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                        showAlert('Failed to update access key status: ' + (error.error || 'Unknown error'), 'error');\n                    refreshAccessKeysList(username);\n                }\n            } catch (error) {\n                console.error('Error updating access key status:', error);\n                showAlert('Failed to update access key status: ' + error.message, 'error');\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 encodedUsername = encodeURIComponent(username);\n                const response = await fetch(`/api/users/${encodedUsername}/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                        showAlert('Failed to create access key: ' + (error.error || 'Unknown error'), 'error');\n                }\n            } catch (error) {\n                console.error('Error creating access key:', error);\n                showAlert('Failed to create access key: ' + error.message, 'error');\n            }\n        }\n\n        // Delete access key\n        async function deleteAccessKey(username, accessKey) {\n            showDeleteConfirm(accessKey, async function() {\n                try {\n                    const encodedUsername = encodeURIComponent(username);\n                    const encodedAccessKey = encodeURIComponent(accessKey);\n                    const response = await fetch(`/api/users/${encodedUsername}/access-keys/${encodedAccessKey}`, {\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            showAlert(message, 'error');\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/s3tables_buckets_templ.go b/weed/admin/view/app/s3tables_buckets_templ.go
index c9270814b..0312c44f2 100644
--- a/weed/admin/view/app/s3tables_buckets_templ.go
+++ b/weed/admin/view/app/s3tables_buckets_templ.go
@@ -211,7 +211,7 @@ func S3TablesBuckets(data dash.S3TablesBucketsData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</tbody></table></div></div></div></div></div></div><div class=\"modal fade\" id=\"createS3TablesBucketModal\" tabindex=\"-1\" aria-labelledby=\"createS3TablesBucketModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"createS3TablesBucketModalLabel\"><i class=\"fas fa-plus me-2\"></i>Create Table Bucket</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"createS3TablesBucketForm\"><div class=\"modal-body\"><div class=\"mb-3\"><label for=\"s3tablesBucketName\" class=\"form-label\">Bucket Name</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesBucketName\" name=\"name\" placeholder=\"table-bucket-name\" required></div><div class=\"mb-3\"><label for=\"s3tablesBucketOwner\" class=\"form-label\">Owner (Optional)</label> <select class=\"form-select\" id=\"s3tablesBucketOwner\" name=\"owner\"><option value=\"\">No owner (admin-only access)</option></select><div class=\"form-text\">The S3 identity that owns this table bucket. Non-admin users can only access table buckets they own.</div></div><div class=\"mb-3\"><label for=\"s3tablesBucketTags\" class=\"form-label\">Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesBucketTags\" name=\"tags\" placeholder=\"key1=value1,key2=value2\"><div class=\"form-text\">Optional tags in key=value format.</div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-plus me-1\"></i>Create</button></div></form></div></div></div><div class=\"modal fade\" id=\"deleteS3TablesBucketModal\" tabindex=\"-1\" aria-labelledby=\"deleteS3TablesBucketModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"deleteS3TablesBucketModalLabel\"><i class=\"fas fa-exclamation-triangle me-2 text-warning\"></i>Delete Table Bucket</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><p>Are you sure you want to delete the table bucket <strong id=\"deleteS3TablesBucketName\"></strong>?</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\" onclick=\"deleteS3TablesBucket()\"><i class=\"fas fa-trash me-1\"></i>Delete</button></div></div></div></div><div class=\"modal fade\" id=\"s3tablesBucketPolicyModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesBucketPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesBucketPolicyModalLabel\"><i class=\"fas fa-shield-alt me-2\"></i>Table Bucket Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesBucketPolicyForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesBucketPolicyArn\" name=\"bucket_arn\"><div class=\"mb-3\"><label for=\"s3tablesBucketPolicyText\" class=\"form-label\">Policy JSON</label> <textarea class=\"form-control\" id=\"s3tablesBucketPolicyText\" name=\"policy\" rows=\"12\" placeholder=\"{ }\"></textarea></div><div class=\"form-text\">Provide a policy JSON; use Delete Policy to remove the policy.</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-outline-danger\" onclick=\"deleteS3TablesBucketPolicy()\"><i class=\"fas fa-trash me-1\"></i>Delete Policy</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Save Policy</button></div></form></div></div></div><div class=\"modal fade\" id=\"s3tablesTagsModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesTagsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesTagsModalLabel\"><i class=\"fas fa-tags me-2\"></i>Resource Tags</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesTagsForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesTagsResourceArn\" name=\"resource_arn\"><div class=\"mb-3\"><label class=\"form-label\">Existing Tags</label><pre class=\"bg-light p-3 border rounded\" id=\"s3tablesTagsList\">Loading...</pre></div><div class=\"mb-3\"><label for=\"s3tablesTagsInput\" class=\"form-label\">Add or Update Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsInput\" placeholder=\"key1=value1,key2=value2\"></div><div class=\"mb-3\"><label for=\"s3tablesTagsDeleteInput\" class=\"form-label\">Remove Tag Keys</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsDeleteInput\" placeholder=\"key1,key2\"></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-outline-danger\" onclick=\"deleteS3TablesTags()\"><i class=\"fas fa-trash me-1\"></i>Remove Tags</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Update Tags</button></div></form></div></div></div><script>\n\t\tlet s3tablesBucketDeleteModal = null;\n\t\tlet s3tablesBucketPolicyModal = null;\n\t\tlet s3tablesTagsModal = null;\n\n\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\ts3tablesBucketDeleteModal = new bootstrap.Modal(document.getElementById('deleteS3TablesBucketModal'));\n\t\t\ts3tablesBucketPolicyModal = new bootstrap.Modal(document.getElementById('s3tablesBucketPolicyModal'));\n\t\t\ts3tablesTagsModal = new bootstrap.Modal(document.getElementById('s3tablesTagsModal'));\n\t\t\tconst ownerSelect = document.getElementById('s3tablesBucketOwner');\n\n\t\t\tdocument.getElementById('createS3TablesBucketModal').addEventListener('show.bs.modal', async function() {\n\t\t\t\tif (ownerSelect.options.length <= 1) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst response = await fetch('/api/users');\n\t\t\t\t\t\tconst data = await response.json();\n\t\t\t\t\t\tconst users = data.users || [];\n\t\t\t\t\t\tusers.forEach(user => {\n\t\t\t\t\t\t\tconst option = document.createElement('option');\n\t\t\t\t\t\t\toption.value = user.username;\n\t\t\t\t\t\t\toption.textContent = user.username;\n\t\t\t\t\t\t\townerSelect.appendChild(option);\n\t\t\t\t\t\t});\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tconsole.error('Error fetching users for owner dropdown:', error);\n\t\t\t\t\t\townerSelect.innerHTML = '<option value=\"\">No owner (admin-only access)</option>';\n\t\t\t\t\t\townerSelect.selectedIndex = 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('.s3tables-delete-bucket-btn').forEach(button => {\n\t\t\t\tbutton.addEventListener('click', function() {\n\t\t\t\t\tdocument.getElementById('deleteS3TablesBucketName').textContent = this.dataset.bucketName || '';\n\t\t\t\t\tdocument.getElementById('deleteS3TablesBucketModal').dataset.bucketArn = this.dataset.bucketArn || '';\n\t\t\t\t\ts3tablesBucketDeleteModal.show();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('.s3tables-bucket-policy-btn').forEach(button => {\n\t\t\t\tbutton.addEventListener('click', function() {\n\t\t\t\t\tconst bucketArn = this.dataset.bucketArn || '';\n\t\t\t\t\tdocument.getElementById('s3tablesBucketPolicyArn').value = bucketArn;\n\t\t\t\t\tloadS3TablesBucketPolicy(bucketArn);\n\t\t\t\t\ts3tablesBucketPolicyModal.show();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('.s3tables-tags-btn').forEach(button => {\n\t\t\t\tbutton.addEventListener('click', function() {\n\t\t\t\t\tconst resourceArn = this.dataset.resourceArn || '';\n\t\t\t\t\topenS3TablesTags(resourceArn);\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.getElementById('createS3TablesBucketForm').addEventListener('submit', async function(e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst name = document.getElementById('s3tablesBucketName').value.trim();\n\t\t\t\tconst owner = ownerSelect.value;\n\t\t\t\tconst tagsInput = document.getElementById('s3tablesBucketTags').value.trim();\n\t\t\t\tconst tags = parseTagsInput(tagsInput);\n\t\t\t\tif (tags === null) return;\n\t\t\t\tconst payload = { name: name, tags: tags, owner: owner };\n\n\t\t\t\ttry {\n\t\t\t\t\tconst response = await fetch('/api/s3tables/buckets', {\n\t\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\t\tbody: JSON.stringify(payload)\n\t\t\t\t\t});\n\t\t\t\t\tconst data = await response.json();\n\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\talert(data.error || 'Failed to create bucket');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\talert('Bucket created successfully');\n\t\t\t\t\tlocation.reload();\n\t\t\t\t} catch (error) {\n\t\t\t\t\talert('Failed to create bucket: ' + error.message);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tdocument.getElementById('s3tablesBucketPolicyForm').addEventListener('submit', async function(e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst bucketArn = document.getElementById('s3tablesBucketPolicyArn').value;\n\t\t\t\tconst policy = document.getElementById('s3tablesBucketPolicyText').value.trim();\n\t\t\t\tif (!policy) {\n\t\t\t\t\talert('Policy JSON is required');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tconst response = await fetch('/api/s3tables/bucket-policy', {\n\t\t\t\t\t\tmethod: 'PUT',\n\t\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\t\tbody: JSON.stringify({ bucket_arn: bucketArn, policy: policy })\n\t\t\t\t\t});\n\t\t\t\t\tconst data = await response.json();\n\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\talert(data.error || 'Failed to update policy');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\talert('Policy updated');\n\t\t\t\t\ts3tablesBucketPolicyModal.hide();\n\t\t\t\t} catch (error) {\n\t\t\t\t\talert('Failed to update policy: ' + error.message);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tdocument.getElementById('s3tablesTagsForm').addEventListener('submit', async function(e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst resourceArn = document.getElementById('s3tablesTagsResourceArn').value;\n\t\t\t\tconst tags = parseTagsInput(document.getElementById('s3tablesTagsInput').value.trim());\n\t\t\t\tif (tags === null || Object.keys(tags).length === 0) {\n\t\t\t\t\talert('Please provide tags to update');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tawait updateS3TablesTags(resourceArn, tags);\n\t\t\t});\n\t\t});\n\n\t\tasync function deleteS3TablesBucket() {\n\t\t\tconst bucketArn = document.getElementById('deleteS3TablesBucketModal').dataset.bucketArn;\n\t\t\tif (!bucketArn) return;\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/buckets?bucket=${encodeURIComponent(bucketArn)}`, { method: 'DELETE' });\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to delete bucket');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Bucket deleted');\n\t\t\t\tlocation.reload();\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to delete bucket: ' + error.message);\n\t\t\t}\n\t\t}\n\n\t\tasync function loadS3TablesBucketPolicy(bucketArn) {\n\t\t\tdocument.getElementById('s3tablesBucketPolicyText').value = '';\n\t\t\tif (!bucketArn) return;\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/bucket-policy?bucket=${encodeURIComponent(bucketArn)}`);\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (response.ok && data.policy) {\n\t\t\t\t\tdocument.getElementById('s3tablesBucketPolicyText').value = data.policy;\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Failed to load bucket policy', error);\n\t\t\t}\n\t\t}\n\n\t\tasync function deleteS3TablesBucketPolicy() {\n\t\t\tconst bucketArn = document.getElementById('s3tablesBucketPolicyArn').value;\n\t\t\tif (!bucketArn) return;\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/bucket-policy?bucket=${encodeURIComponent(bucketArn)}`, { method: 'DELETE' });\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to delete policy');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Policy deleted');\n\t\t\t\tdocument.getElementById('s3tablesBucketPolicyText').value = '';\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to delete policy: ' + error.message);\n\t\t\t}\n\t\t}\n\n\t\tfunction parseTagsInput(input) {\n\t\t\tif (!input) return {};\n\t\t\tconst tags = {};\n\t\t\tconst maxTags = 10;\n\t\t\tconst maxKeyLength = 128;\n\t\t\tconst maxValueLength = 256;\n\t\t\tconst parts = input.split(',');\n\t\t\tfor (const part of parts) {\n\t\t\t\tconst trimmedPart = part.trim();\n\t\t\t\tif (!trimmedPart) continue;\n\t\t\t\tconst idx = trimmedPart.indexOf('=');\n\t\t\t\tif (idx <= 0) {\n\t\t\t\t\talert('Invalid tag format. Use key=value, and key cannot be empty.');\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst key = trimmedPart.slice(0, idx).trim();\n\t\t\t\tconst value = trimmedPart.slice(idx + 1).trim();\n\t\t\t\tif (!key) {\n\t\t\t\t\talert('Invalid tag format. Use key=value, and key cannot be empty.');\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tif (key.length > maxKeyLength) {\n\t\t\t\t\talert(`Tag key length must be <= ${maxKeyLength}`);\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tif (value.length > maxValueLength) {\n\t\t\t\t\talert(`Tag value length must be <= ${maxValueLength}`);\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\ttags[key] = value;\n\t\t\t\tif (Object.keys(tags).length > maxTags) {\n\t\t\t\t\talert(`Too many tags. Max ${maxTags} tags allowed.`);\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn tags;\n\t\t}\n\n\t\tasync function openS3TablesTags(resourceArn) {\n\t\t\tif (!resourceArn) return;\n\t\t\tdocument.getElementById('s3tablesTagsResourceArn').value = resourceArn;\n\t\t\tdocument.getElementById('s3tablesTagsInput').value = '';\n\t\t\tdocument.getElementById('s3tablesTagsDeleteInput').value = '';\n\t\t\tdocument.getElementById('s3tablesTagsList').textContent = 'Loading...';\n\t\t\ts3tablesTagsModal.show();\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/tags?arn=${encodeURIComponent(resourceArn)}`);\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (response.ok) {\n\t\t\t\t\tdocument.getElementById('s3tablesTagsList').textContent = JSON.stringify(data.tags || {}, null, 2);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.getElementById('s3tablesTagsList').textContent = data.error || 'Failed to load tags';\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tdocument.getElementById('s3tablesTagsList').textContent = error.message;\n\t\t\t}\n\t\t}\n\n\t\tasync function updateS3TablesTags(resourceArn, tags) {\n\t\t\ttry {\n\t\t\t\tconst response = await fetch('/api/s3tables/tags', {\n\t\t\t\t\tmethod: 'PUT',\n\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\tbody: JSON.stringify({ resource_arn: resourceArn, tags: tags })\n\t\t\t\t});\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to update tags');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Tags updated');\n\t\t\t\topenS3TablesTags(resourceArn);\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to update tags: ' + error.message);\n\t\t\t}\n\t\t}\n\n\t\tasync function deleteS3TablesTags() {\n\t\t\tconst resourceArn = document.getElementById('s3tablesTagsResourceArn').value;\n\t\t\tconst keysInput = document.getElementById('s3tablesTagsDeleteInput').value.trim();\n\t\t\tif (!resourceArn) return;\n\t\t\tconst tagKeys = keysInput.split(',').map(k => k.trim()).filter(k => k);\n\t\t\tif (tagKeys.length === 0) {\n\t\t\t\talert('Provide tag keys to remove');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst response = await fetch('/api/s3tables/tags', {\n\t\t\t\t\tmethod: 'DELETE',\n\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\tbody: JSON.stringify({ resource_arn: resourceArn, tag_keys: tagKeys })\n\t\t\t\t});\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to remove tags');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Tags removed');\n\t\t\t\topenS3TablesTags(resourceArn);\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to remove tags: ' + error.message);\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</tbody></table></div></div></div></div></div></div><div class=\"modal fade\" id=\"createS3TablesBucketModal\" tabindex=\"-1\" aria-labelledby=\"createS3TablesBucketModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"createS3TablesBucketModalLabel\"><i class=\"fas fa-plus me-2\"></i>Create Table Bucket</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"createS3TablesBucketForm\"><div class=\"modal-body\"><div class=\"mb-3\"><label for=\"s3tablesBucketName\" class=\"form-label\">Bucket Name</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesBucketName\" name=\"name\" placeholder=\"table-bucket-name\" required></div><div class=\"mb-3\"><label for=\"s3tablesBucketOwner\" class=\"form-label\">Owner (Optional)</label> <select class=\"form-select\" id=\"s3tablesBucketOwner\" name=\"owner\"><option value=\"\">No owner (admin-only access)</option></select><div class=\"form-text\">The S3 identity that owns this table bucket. Non-admin users can only access table buckets they own.</div></div><div class=\"mb-3\"><label for=\"s3tablesBucketTags\" class=\"form-label\">Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesBucketTags\" name=\"tags\" placeholder=\"key1=value1,key2=value2\"><div class=\"form-text\">Optional tags in key=value format.</div></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-plus me-1\"></i>Create</button></div></form></div></div></div><div class=\"modal fade\" id=\"deleteS3TablesBucketModal\" tabindex=\"-1\" aria-labelledby=\"deleteS3TablesBucketModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"deleteS3TablesBucketModalLabel\"><i class=\"fas fa-exclamation-triangle me-2 text-warning\"></i>Delete Table Bucket</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><p>Are you sure you want to delete the table bucket <strong id=\"deleteS3TablesBucketName\"></strong>?</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\" onclick=\"deleteS3TablesBucket()\"><i class=\"fas fa-trash me-1\"></i>Delete</button></div></div></div></div><div class=\"modal fade\" id=\"s3tablesBucketPolicyModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesBucketPolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesBucketPolicyModalLabel\"><i class=\"fas fa-shield-alt me-2\"></i>Table Bucket Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesBucketPolicyForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesBucketPolicyArn\" name=\"bucket_arn\"><div class=\"mb-3\"><label for=\"s3tablesBucketPolicyText\" class=\"form-label\">Policy JSON</label> <textarea class=\"form-control\" id=\"s3tablesBucketPolicyText\" name=\"policy\" rows=\"12\" placeholder=\"{ }\"></textarea></div><div class=\"form-text\">Provide a policy JSON; use Delete Policy to remove the policy.</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-outline-danger\" onclick=\"deleteS3TablesBucketPolicy()\"><i class=\"fas fa-trash me-1\"></i>Delete Policy</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Save Policy</button></div></form></div></div></div><div class=\"modal fade\" id=\"s3tablesTagsModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesTagsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesTagsModalLabel\"><i class=\"fas fa-tags me-2\"></i>Resource Tags</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesTagsForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesTagsResourceArn\" name=\"resource_arn\"><div class=\"mb-3\"><label class=\"form-label\">Existing Tags</label><pre class=\"bg-light p-3 border rounded\" id=\"s3tablesTagsList\">Loading...</pre></div><div class=\"mb-3\"><label for=\"s3tablesTagsInput\" class=\"form-label\">Add or Update Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsInput\" placeholder=\"key1=value1,key2=value2\"></div><div class=\"mb-3\"><label for=\"s3tablesTagsDeleteInput\" class=\"form-label\">Remove Tag Keys</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsDeleteInput\" placeholder=\"key1,key2\"></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-outline-danger\" onclick=\"deleteS3TablesTags()\"><i class=\"fas fa-trash me-1\"></i>Remove Tags</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Update Tags</button></div></form></div></div></div><script>\n\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\tinitS3TablesBuckets();\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/app/s3tables_tables_templ.go b/weed/admin/view/app/s3tables_tables_templ.go
index 3e2e4d8b3..22c6e7ca1 100644
--- a/weed/admin/view/app/s3tables_tables_templ.go
+++ b/weed/admin/view/app/s3tables_tables_templ.go
@@ -306,7 +306,7 @@ func S3TablesTables(data dash.S3TablesTablesData) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</tbody></table></div></div></div></div></div></div><div class=\"modal fade\" id=\"createS3TablesTableModal\" tabindex=\"-1\" aria-labelledby=\"createS3TablesTableModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"createS3TablesTableModalLabel\"><i class=\"fas fa-plus me-2\"></i>Create Table</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"createS3TablesTableForm\"><div class=\"modal-body\"><div class=\"mb-3\"><label for=\"s3tablesTableName\" class=\"form-label\">Table Name</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTableName\" name=\"name\" required></div><div class=\"mb-3\"><label for=\"s3tablesTableFormat\" class=\"form-label\">Format</label> <select class=\"form-select\" id=\"s3tablesTableFormat\" name=\"format\"><option value=\"ICEBERG\" selected>ICEBERG</option></select></div><div class=\"mb-3\"><label for=\"s3tablesTableMetadata\" class=\"form-label\">Metadata JSON (optional)</label> <textarea class=\"form-control\" id=\"s3tablesTableMetadata\" name=\"metadata\" rows=\"6\" placeholder=\"{ }\"></textarea></div><div class=\"mb-3\"><label for=\"s3tablesTableTags\" class=\"form-label\">Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTableTags\" name=\"tags\" placeholder=\"key1=value1,key2=value2\"></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-plus me-1\"></i>Create</button></div></form></div></div></div><div class=\"modal fade\" id=\"deleteS3TablesTableModal\" tabindex=\"-1\" aria-labelledby=\"deleteS3TablesTableModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"deleteS3TablesTableModalLabel\"><i class=\"fas fa-exclamation-triangle me-2 text-warning\"></i>Delete Table</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><p>Are you sure you want to delete the table <strong id=\"deleteS3TablesTableName\"></strong>?</p><div class=\"mb-3\"><label for=\"deleteS3TablesTableVersion\" class=\"form-label\">Version Token (optional)</label> <input type=\"text\" class=\"form-control\" id=\"deleteS3TablesTableVersion\" placeholder=\"Version token\"></div></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\" onclick=\"deleteS3TablesTable()\"><i class=\"fas fa-trash me-1\"></i>Delete</button></div></div></div></div><div class=\"modal fade\" id=\"s3tablesTablePolicyModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesTablePolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesTablePolicyModalLabel\"><i class=\"fas fa-shield-alt me-2\"></i>Table Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesTablePolicyForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesTablePolicyBucketArn\" name=\"bucket_arn\"> <input type=\"hidden\" id=\"s3tablesTablePolicyNamespace\" name=\"namespace\"> <input type=\"hidden\" id=\"s3tablesTablePolicyName\" name=\"name\"><div class=\"mb-3\"><label for=\"s3tablesTablePolicyText\" class=\"form-label\">Policy JSON</label> <textarea class=\"form-control\" id=\"s3tablesTablePolicyText\" name=\"policy\" rows=\"12\" placeholder=\"{ }\"></textarea></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-outline-danger\" onclick=\"deleteS3TablesTablePolicy()\"><i class=\"fas fa-trash me-1\"></i>Delete Policy</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Save Policy</button></div></form></div></div></div><div class=\"modal fade\" id=\"s3tablesTagsModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesTagsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesTagsModalLabel\"><i class=\"fas fa-tags me-2\"></i>Resource Tags</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesTagsForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesTagsResourceArn\" name=\"resource_arn\"><div class=\"mb-3\"><label class=\"form-label\">Existing Tags</label><pre class=\"bg-light p-3 border rounded\" id=\"s3tablesTagsList\">Loading...</pre></div><div class=\"mb-3\"><label for=\"s3tablesTagsInput\" class=\"form-label\">Add or Update Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsInput\" placeholder=\"key1=value1,key2=value2\"></div><div class=\"mb-3\"><label for=\"s3tablesTagsDeleteInput\" class=\"form-label\">Remove Tag Keys</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsDeleteInput\" placeholder=\"key1,key2\"></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-outline-danger\" onclick=\"deleteS3TablesTags()\"><i class=\"fas fa-trash me-1\"></i>Remove Tags</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Update Tags</button></div></form></div></div></div><script>\n\t\tlet s3tablesTableDeleteModal = null;\n\t\tlet s3tablesTablePolicyModal = null;\n\t\tlet s3tablesTagsModal = null;\n\n\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\ts3tablesTableDeleteModal = new bootstrap.Modal(document.getElementById('deleteS3TablesTableModal'));\n\t\t\ts3tablesTablePolicyModal = new bootstrap.Modal(document.getElementById('s3tablesTablePolicyModal'));\n\t\t\ts3tablesTagsModal = new bootstrap.Modal(document.getElementById('s3tablesTagsModal'));\n\n\t\t\tdocument.querySelectorAll('.s3tables-delete-table-btn').forEach(button => {\n\t\t\t\tbutton.addEventListener('click', function() {\n\t\t\t\t\tdocument.getElementById('deleteS3TablesTableName').textContent = this.dataset.tableName || '';\n\t\t\t\t\tdocument.getElementById('deleteS3TablesTableModal').dataset.tableName = this.dataset.tableName || '';\n\t\t\t\t\ts3tablesTableDeleteModal.show();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('.s3tables-table-policy-btn').forEach(button => {\n\t\t\t\tbutton.addEventListener('click', function() {\n\t\t\t\t\tdocument.getElementById('s3tablesTablePolicyBucketArn').value = dataBucketArn;\n\t\t\t\t\tdocument.getElementById('s3tablesTablePolicyNamespace').value = dataNamespace;\n\t\t\t\t\tdocument.getElementById('s3tablesTablePolicyName').value = this.dataset.tableName || '';\n\t\t\t\t\tloadS3TablesTablePolicy(dataBucketArn, dataNamespace, this.dataset.tableName || '');\n\t\t\t\t\ts3tablesTablePolicyModal.show();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('.s3tables-tags-btn').forEach(button => {\n\t\t\t\tbutton.addEventListener('click', function() {\n\t\t\t\t\tconst resourceArn = this.dataset.resourceArn || '';\n\t\t\t\t\topenS3TablesTags(resourceArn);\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.getElementById('createS3TablesTableForm').addEventListener('submit', async function(e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst name = document.getElementById('s3tablesTableName').value.trim();\n\t\t\t\tconst format = document.getElementById('s3tablesTableFormat').value;\n\t\t\t\tconst metadataText = document.getElementById('s3tablesTableMetadata').value.trim();\n\t\t\t\tconst tagsInput = document.getElementById('s3tablesTableTags').value.trim();\n\t\t\t\tconst tags = parseTagsInput(tagsInput);\n\t\t\t\tif (tags === null) return;\n\t\t\t\tlet metadata = null;\n\t\t\t\tif (metadataText) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tmetadata = JSON.parse(metadataText);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\talert('Invalid metadata JSON');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst payload = { bucket_arn: dataBucketArn, namespace: dataNamespace, name: name, format: format, tags: tags };\n\t\t\t\tif (metadata) {\n\t\t\t\t\tpayload.metadata = metadata;\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tconst response = await fetch('/api/s3tables/tables', {\n\t\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\t\tbody: JSON.stringify(payload)\n\t\t\t\t\t});\n\t\t\t\t\tconst data = await response.json();\n\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\talert(data.error || 'Failed to create table');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\talert('Table created');\n\t\t\t\t\tlocation.reload();\n\t\t\t\t} catch (error) {\n\t\t\t\t\talert('Failed to create table: ' + error.message);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tdocument.getElementById('s3tablesTablePolicyForm').addEventListener('submit', async function(e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst policy = document.getElementById('s3tablesTablePolicyText').value.trim();\n\t\t\t\tif (!policy) {\n\t\t\t\t\talert('Policy JSON is required');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tconst response = await fetch('/api/s3tables/table-policy', {\n\t\t\t\t\t\tmethod: 'PUT',\n\t\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\t\tbody: JSON.stringify({ bucket_arn: dataBucketArn, namespace: dataNamespace, name: document.getElementById('s3tablesTablePolicyName').value, policy: policy })\n\t\t\t\t\t});\n\t\t\t\t\tconst data = await response.json();\n\t\t\t\t\tif (!response.ok) {\n\t\t\t\t\t\talert(data.error || 'Failed to update policy');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\talert('Policy updated');\n\t\t\t\t\ts3tablesTablePolicyModal.hide();\n\t\t\t\t} catch (error) {\n\t\t\t\t\talert('Failed to update policy: ' + error.message);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tdocument.getElementById('s3tablesTagsForm').addEventListener('submit', async function(e) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst resourceArn = document.getElementById('s3tablesTagsResourceArn').value;\n\t\t\t\tconst tags = parseTagsInput(document.getElementById('s3tablesTagsInput').value.trim());\n\t\t\t\tif (tags === null || Object.keys(tags).length === 0) {\n\t\t\t\t\talert('Please provide tags to update');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tawait updateS3TablesTags(resourceArn, tags);\n\t\t\t});\n\t\t});\n\n\t\tconst dataContainer = document.getElementById('s3tables-tables-content');\n\t\tconst dataBucketArn = dataContainer.dataset.bucketArn || '';\n\t\tconst dataNamespace = dataContainer.dataset.namespace || '';\n\n\t\tasync function deleteS3TablesTable() {\n\t\t\tconst tableName = document.getElementById('deleteS3TablesTableModal').dataset.tableName;\n\t\t\tconst versionToken = document.getElementById('deleteS3TablesTableVersion').value.trim();\n\t\t\tif (!tableName) return;\n\t\t\tconst query = new URLSearchParams({\n\t\t\t\tbucket: dataBucketArn,\n\t\t\t\tnamespace: dataNamespace,\n\t\t\t\tname: tableName\n\t\t\t});\n\t\t\tif (versionToken) {\n\t\t\t\tquery.set('version', versionToken);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/tables?${query.toString()}`, { method: 'DELETE' });\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to delete table');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Table deleted');\n\t\t\t\tlocation.reload();\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to delete table: ' + error.message);\n\t\t\t}\n\t\t}\n\n\t\tasync function loadS3TablesTablePolicy(bucketArn, namespace, name) {\n\t\t\tdocument.getElementById('s3tablesTablePolicyText').value = '';\n\t\t\tif (!bucketArn || !namespace || !name) return;\n\t\t\tconst query = new URLSearchParams({ bucket: bucketArn, namespace: namespace, name: name });\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/table-policy?${query.toString()}`);\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (response.ok && data.policy) {\n\t\t\t\t\tdocument.getElementById('s3tablesTablePolicyText').value = data.policy;\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error('Failed to load table policy', error);\n\t\t\t}\n\t\t}\n\n\t\tasync function deleteS3TablesTablePolicy() {\n\t\t\tconst query = new URLSearchParams({ bucket: dataBucketArn, namespace: dataNamespace, name: document.getElementById('s3tablesTablePolicyName').value });\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/table-policy?${query.toString()}`, { method: 'DELETE' });\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to delete policy');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Policy deleted');\n\t\t\t\tdocument.getElementById('s3tablesTablePolicyText').value = '';\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to delete policy: ' + error.message);\n\t\t\t}\n\t\t}\n\n\t\tfunction parseTagsInput(input) {\n\t\t\tif (!input) return {};\n\t\t\tconst tags = {};\n\t\t\tconst parts = input.split(',');\n\t\t\tfor (const part of parts) {\n\t\t\t\tif (!part.trim()) continue;\n\t\t\t\tconst idx = part.indexOf('=');\n\t\t\t\tif (idx === -1) {\n\t\t\t\t\talert('Invalid tag format. Use key=value');\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst key = part.slice(0, idx);\n\t\t\t\tconst value = part.slice(idx + 1);\n\t\t\t\tif (!key || value === undefined) {\n\t\t\t\t\talert('Invalid tag format. Use key=value');\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\ttags[key.trim()] = value.trim();\n\t\t\t}\n\t\t\treturn tags;\n\t\t}\n\n\t\tasync function openS3TablesTags(resourceArn) {\n\t\t\tif (!resourceArn) return;\n\t\t\tdocument.getElementById('s3tablesTagsResourceArn').value = resourceArn;\n\t\t\tdocument.getElementById('s3tablesTagsInput').value = '';\n\t\t\tdocument.getElementById('s3tablesTagsDeleteInput').value = '';\n\t\t\tdocument.getElementById('s3tablesTagsList').textContent = 'Loading...';\n\t\t\ts3tablesTagsModal.show();\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(`/api/s3tables/tags?arn=${encodeURIComponent(resourceArn)}`);\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (response.ok) {\n\t\t\t\t\tdocument.getElementById('s3tablesTagsList').textContent = JSON.stringify(data.tags || {}, null, 2);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.getElementById('s3tablesTagsList').textContent = data.error || 'Failed to load tags';\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tdocument.getElementById('s3tablesTagsList').textContent = error.message;\n\t\t\t}\n\t\t}\n\n\t\tasync function updateS3TablesTags(resourceArn, tags) {\n\t\t\ttry {\n\t\t\t\tconst response = await fetch('/api/s3tables/tags', {\n\t\t\t\t\tmethod: 'PUT',\n\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\tbody: JSON.stringify({ resource_arn: resourceArn, tags: tags })\n\t\t\t\t});\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to update tags');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Tags updated');\n\t\t\t\topenS3TablesTags(resourceArn);\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to update tags: ' + error.message);\n\t\t\t}\n\t\t}\n\n\t\tasync function deleteS3TablesTags() {\n\t\t\tconst resourceArn = document.getElementById('s3tablesTagsResourceArn').value;\n\t\t\tconst keysInput = document.getElementById('s3tablesTagsDeleteInput').value.trim();\n\t\t\tif (!resourceArn) return;\n\t\t\tconst tagKeys = keysInput.split(',').map(k => k.trim()).filter(k => k);\n\t\t\tif (tagKeys.length === 0) {\n\t\t\t\talert('Provide tag keys to remove');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst response = await fetch('/api/s3tables/tags', {\n\t\t\t\t\tmethod: 'DELETE',\n\t\t\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\t\t\tbody: JSON.stringify({ resource_arn: resourceArn, tag_keys: tagKeys })\n\t\t\t\t});\n\t\t\t\tconst data = await response.json();\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\talert(data.error || 'Failed to remove tags');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\talert('Tags removed');\n\t\t\t\topenS3TablesTags(resourceArn);\n\t\t\t} catch (error) {\n\t\t\t\talert('Failed to remove tags: ' + error.message);\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</tbody></table></div></div></div></div></div></div><div class=\"modal fade\" id=\"createS3TablesTableModal\" tabindex=\"-1\" aria-labelledby=\"createS3TablesTableModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"createS3TablesTableModalLabel\"><i class=\"fas fa-plus me-2\"></i>Create Table</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"createS3TablesTableForm\"><div class=\"modal-body\"><div class=\"mb-3\"><label for=\"s3tablesTableName\" class=\"form-label\">Table Name</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTableName\" name=\"name\" required></div><div class=\"mb-3\"><label for=\"s3tablesTableFormat\" class=\"form-label\">Format</label> <select class=\"form-select\" id=\"s3tablesTableFormat\" name=\"format\"><option value=\"ICEBERG\" selected>ICEBERG</option></select></div><div class=\"mb-3\"><label for=\"s3tablesTableMetadata\" class=\"form-label\">Metadata JSON (optional)</label> <textarea class=\"form-control\" id=\"s3tablesTableMetadata\" name=\"metadata\" rows=\"6\" placeholder=\"{ }\"></textarea></div><div class=\"mb-3\"><label for=\"s3tablesTableTags\" class=\"form-label\">Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTableTags\" name=\"tags\" placeholder=\"key1=value1,key2=value2\"></div></div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-plus me-1\"></i>Create</button></div></form></div></div></div><div class=\"modal fade\" id=\"deleteS3TablesTableModal\" tabindex=\"-1\" aria-labelledby=\"deleteS3TablesTableModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"deleteS3TablesTableModalLabel\"><i class=\"fas fa-exclamation-triangle me-2 text-warning\"></i>Delete Table</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\"><p>Are you sure you want to delete the table <strong id=\"deleteS3TablesTableName\"></strong>?</p><div class=\"mb-3\"><label for=\"deleteS3TablesTableVersion\" class=\"form-label\">Version Token (optional)</label> <input type=\"text\" class=\"form-control\" id=\"deleteS3TablesTableVersion\" placeholder=\"Version token\"></div></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\" onclick=\"deleteS3TablesTable()\"><i class=\"fas fa-trash me-1\"></i>Delete</button></div></div></div></div><div class=\"modal fade\" id=\"s3tablesTablePolicyModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesTablePolicyModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesTablePolicyModalLabel\"><i class=\"fas fa-shield-alt me-2\"></i>Table Policy</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesTablePolicyForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesTablePolicyBucketArn\" name=\"bucket_arn\"> <input type=\"hidden\" id=\"s3tablesTablePolicyNamespace\" name=\"namespace\"> <input type=\"hidden\" id=\"s3tablesTablePolicyName\" name=\"name\"><div class=\"mb-3\"><label for=\"s3tablesTablePolicyText\" class=\"form-label\">Policy JSON</label> <textarea class=\"form-control\" id=\"s3tablesTablePolicyText\" name=\"policy\" rows=\"12\" placeholder=\"{ }\"></textarea></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-outline-danger\" onclick=\"deleteS3TablesTablePolicy()\"><i class=\"fas fa-trash me-1\"></i>Delete Policy</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Save Policy</button></div></form></div></div></div><div class=\"modal fade\" id=\"s3tablesTagsModal\" tabindex=\"-1\" aria-labelledby=\"s3tablesTagsModalLabel\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\" id=\"s3tablesTagsModalLabel\"><i class=\"fas fa-tags me-2\"></i>Resource Tags</h5><button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button></div><form id=\"s3tablesTagsForm\"><div class=\"modal-body\"><input type=\"hidden\" id=\"s3tablesTagsResourceArn\" name=\"resource_arn\"><div class=\"mb-3\"><label class=\"form-label\">Existing Tags</label><pre class=\"bg-light p-3 border rounded\" id=\"s3tablesTagsList\">Loading...</pre></div><div class=\"mb-3\"><label for=\"s3tablesTagsInput\" class=\"form-label\">Add or Update Tags</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsInput\" placeholder=\"key1=value1,key2=value2\"></div><div class=\"mb-3\"><label for=\"s3tablesTagsDeleteInput\" class=\"form-label\">Remove Tag Keys</label> <input type=\"text\" class=\"form-control\" id=\"s3tablesTagsDeleteInput\" placeholder=\"key1,key2\"></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-outline-danger\" onclick=\"deleteS3TablesTags()\"><i class=\"fas fa-trash me-1\"></i>Remove Tags</button> <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-save me-1\"></i>Update Tags</button></div></form></div></div></div><script>\n\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\tinitS3TablesTables();\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/weed/admin/view/layout/layout_templ.go b/weed/admin/view/layout/layout_templ.go
index b7f57e0f1..6d1a78b4e 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><!-- Modal Alerts JS (replaces native alert/confirm) --><script src=\"/static/js/modal-alerts.js\"></script><!-- Custom JS --><script src=\"/static/js/admin.js\"></script><script src=\"/static/js/iam-utils.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><script src=\"/static/js/iam-utils.js\"></script><script src=\"/static/js/s3tables.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: 379, Col: 17}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 380, 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: 393, Col: 57}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 394, 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: 400, Col: 45}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/layout/layout.templ`, Line: 401, Col: 45}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
 			if templ_7745c5c3_Err != nil {