package app

import (
    "fmt"
    "github.com/seaweedfs/seaweedfs/weed/admin/dash"
)

templ ObjectStoreUsers(data dash.ObjectStoreUsersData) {
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <div>
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-users me-2"></i>Object Store Users
                </h1>
                <p class="mb-0 text-muted">Manage S3 API users and their access credentials</p>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary" 
                        data-bs-toggle="modal" 
                        data-bs-target="#createUserModal">
                    <i class="fas fa-plus me-1"></i>Create User
                </button>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total Users
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    {fmt.Sprintf("%d", data.TotalUsers)}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Total Users
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    {fmt.Sprintf("%d", len(data.Users))}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user-check fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Last Updated
                                </div>
                                <div class="h6 mb-0 font-weight-bold text-gray-800">
                                    {data.LastUpdated.Format("15:04")}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clock fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Users Table -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-users me-2"></i>Object Store Users
                        </h6>
                        <div class="dropdown no-arrow">
                            <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in">
                                <div class="dropdown-header">Actions:</div>
                                <a class="dropdown-item" href="#" onclick="exportUsers()">
                                    <i class="fas fa-download me-2"></i>Export List
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover" width="100%" cellspacing="0" id="usersTable">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        <th>Email</th>
                                        <th>Access Key</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    for _, user := range data.Users {
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user me-2 text-muted"></i>
                                                    <strong>{user.Username}</strong>
                                                    if user.IsStatic {
                                                        <span class="badge bg-secondary ms-2" title="Loaded from config file (read-only)">static</span>
                                                    }
                                                </div>
                                            </td>
                                            <td>{user.Email}</td>
                                            <td>
                                                <code class="text-muted">{user.AccessKey}</code>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <button type="button" class="btn btn-outline-info"
                                                            data-action="show-user-details" data-username={ user.Username }>
                                                        <i class="fas fa-info-circle"></i>
                                                    </button>
                                                    if !user.IsStatic {
                                                        <button type="button" class="btn btn-outline-primary"
                                                                data-action="edit-user" data-username={ user.Username }>
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    }
                                                    if user.Username != "anonymous" && !user.IsStatic {
                                                        <button type="button" class="btn btn-outline-secondary"
                                                                data-action="manage-access-keys" data-username={ user.Username }>
                                                            <i class="fas fa-key"></i>
                                                        </button>
                                                    }
                                                    if !user.IsStatic {
                                                        <button type="button" class="btn btn-outline-danger"
                                                                data-action="delete-user" data-username={ user.Username }>
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    }
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                    if len(data.Users) == 0 {
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-4">
                                                <i class="fas fa-users fa-3x mb-3 text-muted"></i>
                                                <div>
                                                    <h5>No users found</h5>
                                                    <p>Create your first object store user to get started.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Last Updated -->
        <div class="row">
            <div class="col-12">
                <small class="text-muted">
                    <i class="fas fa-clock me-1"></i>
                    Last updated: {data.LastUpdated.Format("2006-01-02 15:04:05")}
                </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>
                            if !data.HasAnonymousUser {
                                <div class="input-group">
                                    <input type="text" class="form-control" id="username" name="username" required>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0 me-1" type="checkbox" id="anonymousCheck" onchange="toggleAnonymousUser()">
                                        <label class="form-check-label small" for="anonymousCheck">Anonymous</label>
                                    </div>
                                </div>
                            } else {
                                <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>
                        <div class="mb-3">
                            <label class="form-label">Groups</label>
                            <div id="editUserGroups">
                                <!-- Groups loaded dynamically -->
                            </div>
                            <div class="input-group mt-2">
                                <select class="form-select" id="editGroupSelect">
                                    <option value="">Add to group...</option>
                                </select>
                                <button class="btn btn-outline-primary" type="button" onclick="addUserToGroupFromEdit()"
                                        aria-label="Add user to group" title="Add user to group">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="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="toggleCreateKeyForm()">
                            <i class="fas fa-plus me-1"></i>Create New Key
                        </button>
                    </div>
                    <div id="createKeyForm" class="card mb-3" style="display: none;">
                        <div class="card-body">
                            <p class="text-muted small mb-2">Leave blank to auto-generate.</p>
                            <div class="mb-2">
                                <label for="newAccessKeyInput" class="form-label form-label-sm">Access Key</label>
                                <input type="text" class="form-control form-control-sm" id="newAccessKeyInput" placeholder="Auto-generated if empty" minlength="4" maxlength="128">
                            </div>
                            <div class="mb-2">
                                <label for="newSecretKeyInput" class="form-label form-label-sm">Secret Key</label>
                                <div class="input-group input-group-sm">
                                    <input type="password" class="form-control form-control-sm" id="newSecretKeyInput" placeholder="Auto-generated if empty" minlength="8" maxlength="128">
                                    <button class="btn btn-outline-secondary" type="button" onclick="toggleSecretKeyVisibility()" aria-label="Toggle secret key visibility">
                                        <i class="fas fa-eye" id="secretKeyToggleIcon"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary btn-sm" onclick="createAccessKey()">Create</button>
                                <button type="button" class="btn btn-secondary btn-sm" onclick="toggleCreateKeyForm()">Cancel</button>
                            </div>
                        </div>
                    </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>
        // Access key status constants
        const STATUS_ACTIVE = 'Active';
        const STATUS_INACTIVE = 'Inactive';

        document.addEventListener('DOMContentLoaded', function() {
            
            // Event delegation for user action buttons
            document.addEventListener('click', function(e) {
                const button = e.target.closest('[data-action]');
                if (!button) return;
                
                const action = button.getAttribute('data-action');
                const username = button.getAttribute('data-username');
                
                switch (action) {
                    case 'show-user-details':
                        showUserDetails(username);
                        break;
                    case 'edit-user':
                        editUser(username);
                        break;
                    case 'manage-access-keys':
                        manageAccessKeys(username);
                        break;
                    case 'delete-user':
                        deleteUser(username);
                        break;
                }
            });

            // Event delegation for delete access key buttons
            document.addEventListener('click', function(e) {
                const deleteBtn = e.target.closest('.delete-access-key-btn');
                if (deleteBtn) {
                    const username = deleteBtn.getAttribute('data-username');
                    const accessKey = deleteBtn.getAttribute('data-access-key');
                    deleteAccessKey(username, accessKey);
                }
            });

            // Event delegation for access key status changes
            document.addEventListener('change', function(e) {
                const statusSelect = e.target.closest('.access-key-status-select');
                if (statusSelect) {
                    const username = statusSelect.getAttribute('data-username');
                    const accessKey = statusSelect.getAttribute('data-access-key');
                    const newStatus = statusSelect.value;
                    updateAccessKeyStatus(username, accessKey, newStatus);
                }
            });

            // Load policies for dropdowns
            loadPolicies();
            
            // Load buckets for bucket permissions
            loadBuckets();
        });

        // Global variable to store available buckets
        var availableBuckets = [];
        var bucketPermissionCounter = 0;
        const s3TablesPermissions = new Set([
            'CreateTableBucket',
            'GetTableBucket',
            'ListTableBuckets',
            'DeleteTableBucket',
            'PutTableBucketPolicy',
            'GetTableBucketPolicy',
            'DeleteTableBucketPolicy',
            'CreateNamespace',
            'GetNamespace',
            'ListNamespaces',
            'DeleteNamespace',
            'CreateTable',
            'GetTable',
            'ListTables',
            'DeleteTable',
            'PutTablePolicy',
            'GetTablePolicy',
            'DeleteTablePolicy',
            'TagResource',
            'ListTagsForResource',
            'UntagResource'
        ]);
        function isS3TablesPermission(permission) {
            return permission === 'S3TablesAdmin' || s3TablesPermissions.has(permission);
        }

        // Load buckets
        async function loadBuckets() {
            try {
                const response = await fetch('/api/s3/buckets');
                if (response.ok) {
                    const data = await response.json();
                    availableBuckets = (data.buckets || []).map(bucket => ({ name: bucket.name, type: 's3' }));
                    console.log('Loaded', availableBuckets.length, 'buckets');
                } else {
                    console.warn('Failed to load buckets');
                    availableBuckets = [];
                }
            } catch (error) {
                console.error('Error loading buckets:', error);
                availableBuckets = [];
            }
            try {
                const response = await fetch('/api/s3tables/buckets');
                if (response.ok) {
                    const data = await response.json();
                    const tableBuckets = (data.buckets || data.tableBuckets || []).map(bucket => ({ name: bucket.name, type: 's3tables' }));
                    availableBuckets = availableBuckets.concat(tableBuckets);
                } else {
                    console.warn('Failed to load table buckets');
                }
            } catch (error) {
                console.warn('Error loading table buckets:', error);
            }
            // Populate bucket selection dropdowns
            populateBucketSelections();
        }

        // Load policies
        async function loadPolicies() {
            try {
                const response = await fetch('/api/object-store/policies');
                if (response.ok) {
                    const data = await response.json();
                    const policies = data.policies || [];
                    
                    const createSelect = document.getElementById('policies');
                    const editSelect = document.getElementById('editPolicies');
                    
                    // Check if elements exist
                    if (!createSelect || !editSelect) {
                        console.warn('Policy select elements not found');
                        return;
                    }
                    
                    // Clear existing options
                    createSelect.innerHTML = '';
                    editSelect.innerHTML = '';
                    
                    if (policies && policies.length > 0) {
                        policies.forEach(policy => {
                            const option = document.createElement('option');
                            option.value = policy.name;
                            option.textContent = policy.name;
                            createSelect.appendChild(option);
                            editSelect.appendChild(option.cloneNode(true));
                        });
                    } else {
                        const emptyOption = document.createElement('option');
                        emptyOption.disabled = true;
                        emptyOption.textContent = 'No policies available';
                        createSelect.appendChild(emptyOption);
                        editSelect.appendChild(emptyOption.cloneNode(true));
                    }
                } else {
                    const error = await response.json().catch(() => ({}));
                    showAlert('Failed to load policies: ' + (error.error || 'Unknown error'), 'error');
                }
            } catch (error) {
                console.error('Error loading policies:', error);
                showAlert('Failed to load policies: ' + error.message, 'error');
            }
        }

        // Toggle bucket permission fields when Admin checkbox changes
        function toggleBucketPermissionFields(mode) {
            mode = mode || 'create';
            const adminCheckbox = document.getElementById(mode === 'edit' ? 'editBucketAdmin' : 'bucketAdmin');
            const permissionFields = document.getElementById(mode === 'edit' ? 'editBucketPermissionFields' : 'bucketPermissionFields');
            
            if (adminCheckbox && permissionFields) {
                permissionFields.style.display = adminCheckbox.checked ? 'none' : 'block';
            }
        }

        // Toggle bucket list visibility when bucket scope changes
        function toggleBucketList(mode) {
            mode = mode || 'create';
            const specificRadio = document.getElementById(mode === 'edit' ? 'editSpecificBuckets' : 'specificBuckets');
            const bucketList = document.getElementById(mode === 'edit' ? 'editBucketSelectionList' : 'bucketSelectionList');
            
            if (specificRadio && bucketList) {
                bucketList.style.display = specificRadio.checked ? 'block' : 'none';
            }
        }

        // Toggle anonymous user checkbox
        function toggleAnonymousUser() {
            const checkbox = document.getElementById('anonymousCheck');
            const usernameInput = document.getElementById('username');
            const generateKey = document.getElementById('generateKey');
            if (checkbox.checked) {
                usernameInput.value = 'anonymous';
                usernameInput.readOnly = true;
                generateKey.checked = false;
                generateKey.disabled = true;
            } else {
                usernameInput.value = '';
                usernameInput.readOnly = false;
                generateKey.disabled = false;
                generateKey.checked = true;
            }
        }

        // Populate bucket selection dropdowns
        function populateBucketSelections() {
            const createSelect = document.getElementById('selectedBuckets');
            const editSelect = document.getElementById('editSelectedBuckets');
            
            [createSelect, editSelect].forEach(select => {
                if (select) {
                    select.innerHTML = '';
                    availableBuckets.forEach(bucket => {
                        const option = document.createElement('option');
                        option.value = bucket.type + ':' + bucket.name;
                        option.textContent = bucket.type === 's3tables' ? `Table: ${bucket.name}` : bucket.name;
                        select.appendChild(option);
                    });
                }
            });
        }

        // Parse bucket permissions from actions array for new UI
        function parseBucketPermissions(actions) {
            const result = {
                isAdmin: false,
                permissions: [],
                applyToAll: false,
                specificBuckets: []
            };
            
            // Check if user has Admin permission
            if (actions.includes('Admin')) {
                result.isAdmin = true;
                return result;
            }
            
            // Separate bucket-scoped from global actions
            const bucketActions = [];
            const globalBucketPerms = [];
            
            actions.forEach(action => {
                if (action.startsWith('s3tables:')) {
                    const actionValue = action.slice('s3tables:'.length);
                    if (actionValue === '*') {
                        globalBucketPerms.push('S3TablesAdmin');
                        return;
                    }
                    const parts = actionValue.split(':');
                    const perm = parts[0];
                    const bucket = parts.length > 1 ? parts.slice(1).join(':').replace(/\/\*$/, '') : '';
                    if (bucket) {
                        bucketActions.push({ permission: perm, bucketId: 's3tables:' + bucket });
                    } else {
                        globalBucketPerms.push(perm);
                    }
                } else if (action.includes(':')) {
                    const parts = action.split(':');
                    const perm = parts[0];
                    const bucket = parts.slice(1).join(':').replace(/\/\*$/, '');
                    bucketActions.push({ permission: perm, bucketId: 's3:' + bucket });
                } else {
                    globalBucketPerms.push(action);
                }
            });
            
            // If we have global bucket permissions (no colon), they apply to all buckets
            if (globalBucketPerms.length > 0) {
                result.permissions = globalBucketPerms;
                result.applyToAll = true;
            } else if (bucketActions.length > 0) {
                // Get unique permissions and buckets
                const perms = [...new Set(bucketActions.map(ba => ba.permission))];
                const buckets = [...new Set(bucketActions.map(ba => ba.bucketId))];
                
                result.permissions = perms;
                result.applyToAll = false;
                result.specificBuckets = buckets;
            }
            
            return result;
        }

        function parseBucketOptionValue(value) {
            if (value.startsWith('s3tables:')) {
                return { type: 's3tables', name: value.slice('s3tables:'.length) };
            }
            if (value.startsWith('s3:')) {
                return { type: 's3', name: value.slice('s3:'.length) };
            }
            return { type: 's3', name: value };
        }

        // Build bucket permission action strings using original permissions dropdown
        /**
         * Builds bucket permission strings based on selected permissions and bucket scope.
         * @param {string} mode - The operation mode, either 'create' or 'edit'.
         * @returns {string[]|null} Array of permission strings (e.g., ['Read:bucket1']) or null if validation fails (specific scope selected but no buckets).
         */
        function buildBucketPermissions(mode) {
            mode = mode || 'create';
            const selectId = mode === 'edit' ? 'editActions' : 'actions';
            const permSelect = document.getElementById(selectId);
            
            if (!permSelect) return [];
            
            // Get selected permissions from the original multi-select
            const selectedPerms = Array.from(permSelect.selectedOptions).map(opt => opt.value);
            
            const hasAdmin = selectedPerms.includes('Admin');
            const hasS3TablesAdmin = selectedPerms.includes('S3TablesAdmin');
            
            if (selectedPerms.length === 0) {
                return [];
            }
            
            // Check if applying to all buckets or specific ones
            // Use querySelector to find the checked radio button by name group
            const scopeName = mode === 'edit' ? 'editBucketScope' : 'bucketScope';
            
            // Try multiple methods to find the checked radio
            let checkedRadio = document.querySelector(`input[name="${scopeName}"]:checked`);
            
            // Fallback: check both radio buttons explicitly
            if (!checkedRadio) {
                const allBucketsId = mode === 'edit' ? 'editAllBuckets' : 'allBuckets';
                const specificBucketsId = mode === 'edit' ? 'editSpecificBuckets' : 'specificBuckets';
                
                const allBucketsRadio = document.getElementById(allBucketsId);
                const specificBucketsRadio = document.getElementById(specificBucketsId);
                
                if (specificBucketsRadio && specificBucketsRadio.checked) {
                    checkedRadio = specificBucketsRadio;
                } else if (allBucketsRadio && allBucketsRadio.checked) {
                    checkedRadio = allBucketsRadio;
                }
            }

            // Default to 'all' if nothing is checked (shouldn't happen) or if 'all' is checked
            const applyToAll = !checkedRadio || checkedRadio.value === 'all';

            if (applyToAll) {
                // Return global permissions (no bucket specification)
                const actions = [];
                if (hasAdmin) {
                    actions.push('Admin');
                }
                if (hasS3TablesAdmin) {
                    actions.push('s3tables:*');
                }
                selectedPerms.forEach(perm => {
                    if (perm === 'Admin' || perm === 'S3TablesAdmin') {
                        return;
                    }
                    if (isS3TablesPermission(perm)) {
                        actions.push('s3tables:' + perm);
                    } else {
                        actions.push(perm);
                    }
                });
                return actions;
            } else {
                // Get selected specific buckets
                const bucketSelect = document.getElementById(mode === 'edit' ? 'editSelectedBuckets' : 'selectedBuckets');
                if (!bucketSelect) return null;
                
                const selectedBuckets = [...new Set(Array.from(bucketSelect.selectedOptions).map(opt => opt.value))];
                
                // Return null to signal validation failure if no buckets selected
                if (selectedBuckets.length === 0) {
                    return null;
                }
                
                // Build bucket-scoped permissions
                const actions = [];
                if (hasAdmin) {
                    actions.push('Admin');
                }
                if (hasS3TablesAdmin) {
                    actions.push('s3tables:*');
                }
                selectedPerms.forEach(perm => {
                    if (perm === 'Admin' || perm === 'S3TablesAdmin') {
                        return;
                    }
                    selectedBuckets.forEach(bucket => {
                        const bucketInfo = parseBucketOptionValue(bucket);
                        if (isS3TablesPermission(perm)) {
                            if (bucketInfo.type === 's3tables') {
                                actions.push('s3tables:' + perm + ':' + bucketInfo.name);
                            }
                        } else if (bucketInfo.type === 's3') {
                            actions.push(perm + ':' + bucketInfo.name);
                        }
                    });
                });
                
                return [...new Set(actions)];
            }
        }

        // Show user details modal
        async function showUserDetails(username) {
            try {
                const encodedUsername = encodeURIComponent(username);
                const response = await fetch(`/api/users/${encodedUsername}`);
                if (response.ok) {
                    const user = await response.json();
                    document.getElementById('userDetailsContent').innerHTML = createUserDetailsContent(user);
                    const modal = new bootstrap.Modal(document.getElementById('userDetailsModal'));
                    modal.show();
                } else {
                    showAlert('Failed to load user details', 'error');
                }
            } catch (error) {
                console.error('Error loading user details:', error);
                showAlert('Failed to load user details', 'error');
            }
        }

        // Edit user function
        async function editUser(username) {
            try {
                const encodedUsername = encodeURIComponent(username);
                const response = await fetch(`/api/users/${encodedUsername}`);
                if (response.ok) {
                    const user = await response.json();
                    
                    // Populate edit form
                    document.getElementById('editUsername').value = username;
                    document.getElementById('editEmail').value = user.email || '';
                    
                    // Set selected actions
                    const actionsSelect = document.getElementById('editActions');
                    Array.from(actionsSelect.options).forEach(option => {
                        option.selected = user.actions && user.actions.includes(option.value);
                    });

                    // Set selected policies
                    const policiesSelect = document.getElementById('editPolicies');
                    if (policiesSelect) {
                        Array.from(policiesSelect.options).forEach(option => {
                            option.selected = user.policy_names && user.policy_names.includes(option.value);
                        });
                    }
                    
                    // Populate bucket permissions using original permissions dropdown
                    if (user.actions && user.actions.length > 0) {
                        const bucketPerms = parseBucketPermissions(user.actions);
                        
                        // Set permissions in the original multi-select
                        const actionsSelect = document.getElementById('editActions');
                        if (actionsSelect) {
                            Array.from(actionsSelect.options).forEach(option => {
                                if (bucketPerms.isAdmin && option.value === 'Admin') {
                                    option.selected = true;
                                } else if (!bucketPerms.isAdmin && bucketPerms.permissions.includes(option.value)) {
                                    option.selected = true;
                                }
                            });
                        }
                        
                        // Set bucket scope (all or specific)
                        const allBucketsRadio = document.getElementById('editAllBuckets');
                        const specificBucketsRadio = document.getElementById('editSpecificBuckets');
                        
                        if (!bucketPerms.isAdmin) {
                            if (bucketPerms.applyToAll) {
                                if (allBucketsRadio) allBucketsRadio.checked = true;
                            } else if (bucketPerms.specificBuckets.length > 0) {
                                if (specificBucketsRadio) specificBucketsRadio.checked = true;
                                toggleBucketList('edit');
                                
                                // Select specific buckets
                                const bucketSelect = document.getElementById('editSelectedBuckets');
                                if (bucketSelect) {
                                    Array.from(bucketSelect.options).forEach(option => {
                                        option.selected = bucketPerms.specificBuckets.includes(option.value);
                                    });
                                }
                            }
                        }
                    }
                    
                    // Populate groups
                    await populateEditUserGroups(username);

                    // Show modal
                    const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
                    modal.show();
                } else {
                    showAlert('Failed to load user details', 'error');
                }
            } catch (error) {
                console.error('Error loading user:', error);
                showAlert('Failed to load user details', 'error');
            }
        }

        // Manage access keys function
        async function manageAccessKeys(username) {
            try {
                const encodedUsername = encodeURIComponent(username);
                const response = await fetch(`/api/users/${encodedUsername}`);
                if (response.ok) {
                    const user = await response.json();
                    document.getElementById('accessKeysUsername').textContent = username;
                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);
                    const modal = new bootstrap.Modal(document.getElementById('accessKeysModal'));
                    modal.show();
                } else {
                    showAlert('Failed to load access keys', 'error');
                }
            } catch (error) {
                console.error('Error loading access keys:', error);
                showAlert('Failed to load access keys', 'error');
            }
        }

        // Delete user function
        async function deleteUser(username) {
            showDeleteConfirm(username, async function() {
                try {
                    const encodedUsername = encodeURIComponent(username);
                    const response = await fetch(`/api/users/${encodedUsername}`, {
                        method: 'DELETE'
                    });
                    
                    if (response.ok) {
                        showSuccessMessage('User deleted successfully');
                        setTimeout(() => window.location.reload(), 1000);
                    } else {
                        const error = await response.json();
                        showErrorMessage('Failed to delete user: ' + (error.error || 'Unknown error'));
                    }
                } catch (error) {
                    console.error('Error deleting user:', error);
                    showErrorMessage('Failed to delete user: ' + error.message);
                }
            }, 'Are you sure you want to delete this user? This action cannot be undone.');
        }

        // Handle create user form submission
        async function handleCreateUser() {
            const form = document.getElementById('createUserForm');
            const formData = new FormData(form);
            
            // Get permissions with bucket scope applied
            const allActions = buildBucketPermissions('create');
            
            if (allActions === null) {
                showAlert('Please select at least one bucket when using specific bucket permissions', 'error');
                return;
            }

            if (!allActions || allActions.length === 0) {
                showAlert('At least one permission must be selected', 'error');
                return;
            }
            
            const userData = {
                username: formData.get('username'),
                email: formData.get('email'),
                actions: allActions,
                policy_names: Array.from(document.getElementById('policies').selectedOptions).map(option => option.value),
                generate_key: document.getElementById('generateKey').checked
            };
            
            try {
                const response = await fetch('/api/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(userData)
                });
                
                if (response.ok) {
                    const result = await response.json();
                    showSuccessMessage('User created successfully');
                    
                    // Show the created access key if generated
                    if (result.user && result.user.access_key) {
                        showNewAccessKeyModal(result.user);
                    }
                    
                    // Close modal and refresh page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal'));
                    modal.hide();
                    form.reset();
                    document.getElementById('username').readOnly = false;
                    document.getElementById('generateKey').disabled = false;
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    const error = await response.json();
                    showAlert('Failed to create user: ' + (error.error || 'Unknown error'), 'error');
                }
            } catch (error) {
                console.error('Error creating user:', error);
                showAlert('Failed to create user: ' + error.message, 'error');
            }
        }


        // Populate groups in the edit user modal
        async function populateEditUserGroups(username) {
            const container = document.getElementById('editUserGroups');
            const groupSelect = document.getElementById('editGroupSelect');
            container.innerHTML = '';
            groupSelect.innerHTML = '<option value="">Add to group...</option>';

            try {
                // Fetch all groups
                const groupsResp = await fetch('/api/groups');
                if (!groupsResp.ok) return;
                const groupsData = await groupsResp.json();
                const allGroups = groupsData.groups || [];

                // Fetch user details to get current groups
                const userResp = await fetch(`/api/users/${encodeURIComponent(username)}`);
                if (!userResp.ok) return;
                const user = await userResp.json();
                const userGroups = user.groups || [];

                // Show current group badges with remove button
                if (userGroups.length > 0) {
                    userGroups.forEach(function(group) {
                        const badge = document.createElement('span');
                        badge.className = 'badge bg-primary me-1 mb-1';
                        badge.textContent = group + ' ';
                        const removeIcon = document.createElement('i');
                        removeIcon.className = 'fas fa-times ms-1';
                        removeIcon.style.cursor = 'pointer';
                        removeIcon.setAttribute('aria-label', 'Remove from group ' + group);
                        removeIcon.setAttribute('title', 'Remove from group');
                        removeIcon.addEventListener('click', function() {
                            removeUserFromGroupInEdit(group);
                        });
                        badge.appendChild(removeIcon);
                        container.appendChild(badge);
                    });
                } else {
                    container.innerHTML = '<span class="text-muted">No groups</span>';
                }

                // Populate dropdown with groups the user is NOT in
                allGroups.forEach(function(g) {
                    if (!userGroups.includes(g.name)) {
                        const opt = document.createElement('option');
                        opt.value = g.name;
                        opt.textContent = g.name;
                        groupSelect.appendChild(opt);
                    }
                });
            } catch (error) {
                console.error('Error loading groups:', error);
            }
        }

        // Add user to group from edit modal
        async function addUserToGroupFromEdit() {
            const username = document.getElementById('editUsername').value;
            const groupSelect = document.getElementById('editGroupSelect');
            const groupName = groupSelect.value;
            if (!groupName) return;

            try {
                const response = await fetch(`/api/groups/${encodeURIComponent(groupName)}/members`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username: username })
                });
                if (response.ok) {
                    await populateEditUserGroups(username);
                } else {
                    const error = await response.json();
                    showAlert('Failed to add to group: ' + (error.error || 'Unknown error'), 'error');
                }
            } catch (error) {
                showAlert('Failed to add to group: ' + error.message, 'error');
            }
        }

        // Remove user from group in edit modal
        async function removeUserFromGroupInEdit(groupName) {
            const username = document.getElementById('editUsername').value;
            try {
                const response = await fetch(`/api/groups/${encodeURIComponent(groupName)}/members/${encodeURIComponent(username)}`, {
                    method: 'DELETE'
                });
                if (response.ok) {
                    await populateEditUserGroups(username);
                } else {
                    const error = await response.json();
                    showAlert('Failed to remove from group: ' + (error.error || 'Unknown error'), 'error');
                }
            } catch (error) {
                showAlert('Failed to remove from group: ' + error.message, 'error');
            }
        }

        // Handle update user form submission
        async function handleUpdateUser() {
            const username = document.getElementById('editUsername').value;
            if (!username) {
                showAlert('Username is required', 'error');
                return;
            }
            
            // Get permissions with bucket scope applied
            const allActions = buildBucketPermissions('edit');
            
            // Check for null (validation failure from buildBucketPermissions)
            if (allActions === null) {
                showAlert('Please select at least one bucket when using specific bucket permissions', 'error');
                return;
            }
            
            // Validate that permissions are not empty
            if (!allActions || allActions.length === 0) {
                showAlert('At least one permission must be selected', 'error');
                return;
            }
            
            const userData = {
                email: document.getElementById('editEmail').value,
                actions: allActions,
                policy_names: Array.from(document.getElementById('editPolicies').selectedOptions).map(option => option.value)
            };
            
            try {
                const encodedUsername = encodeURIComponent(username);
                const response = await fetch(`/api/users/${encodedUsername}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(userData)
                });
                
                if (response.ok) {
                    showSuccessMessage('User updated successfully');
                    
                    // Close modal and refresh page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
                    modal.hide();
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    const error = await response.json();
                        showAlert('Failed to update user: ' + (error.error || 'Unknown error'), 'error');
                }
            } catch (error) {
                console.error('Error updating user:', error);
                showAlert('Failed to update user: ' + error.message, 'error');
            }
        }


        // Create user details content
        function createUserDetailsContent(user) {
            var detailsHtml = '<div class="row">';
            detailsHtml += '<div class="col-md-6">';
            detailsHtml += '<h6 class="text-muted">Basic Information</h6>';
            detailsHtml += '<table class="table table-sm">';
            detailsHtml += '<tr><td><strong>Username:</strong></td><td>' + escapeHtml(user.username) + '</td></tr>';
            detailsHtml += '<tr><td><strong>Email:</strong></td><td>' + escapeHtml(user.email || 'Not set') + '</td></tr>';
            detailsHtml += '</table>';
            detailsHtml += '</div>';
            detailsHtml += '<div class="col-md-6">';
                         detailsHtml += '<h6 class="text-muted">Permissions</h6>';
             detailsHtml += '<div class="mb-3">';
             if (user.actions && user.actions.length > 0) {
                 detailsHtml += user.actions.map(function(action) {
                     return '<span class="badge bg-info me-1">' + escapeHtml(action) + '</span>';
                 }).join('');
             } else {
                 detailsHtml += '<span class="text-muted">No permissions assigned</span>';
             }
              detailsHtml += '</div>';
              detailsHtml += '<h6 class="text-muted">Attached Policy Names</h6>';
              detailsHtml += '<div class="mb-3">';
              if (user.policy_names && user.policy_names.length > 0) {
                  detailsHtml += user.policy_names.map(function(policy) {
                      return '<span class="badge bg-secondary me-1">' + escapeHtml(policy) + '</span>';
                  }).join('');
              } else {
                  detailsHtml += '<span class="text-muted">No policies attached</span>';
              }
              detailsHtml += '</div>';
              detailsHtml += '<h6 class="text-muted">Groups</h6>';
              detailsHtml += '<div class="mb-3">';
              if (user.groups && user.groups.length > 0) {
                  detailsHtml += user.groups.map(function(group) {
                      return '<span class="badge bg-primary me-1">' + escapeHtml(group) + '</span>';
                  }).join('');
              } else {
                  detailsHtml += '<span class="text-muted">No groups</span>';
              }
              detailsHtml += '</div>';
              detailsHtml += '<h6 class="text-muted">Access Keys</h6>';
             if (user.access_keys && user.access_keys.length > 0) {
                 detailsHtml += '<div class="mb-2">';
                 user.access_keys.forEach(function(key) {
                     detailsHtml += '<div><code class="text-muted">' + escapeHtml(key.access_key) + '</code></div>';
                 });
                 detailsHtml += '</div>';
             } else {
                 detailsHtml += '<p class="text-muted">No access keys</p>';
             }
            detailsHtml += '</div>';
            detailsHtml += '</div>';
            return detailsHtml;
        }

        // Create access keys content
        function createAccessKeysContent(user) {
            if (!user.access_keys || user.access_keys.length === 0) {
                return '<p class="text-muted">No access keys available</p>';
            }
            
            var keysHtml = '<div class="table-responsive">';
            keysHtml += '<table class="table table-sm">';
            keysHtml += '<thead><tr><th>Access Key</th><th>Status</th><th>Actions</th></tr></thead>';
            keysHtml += '<tbody>';
            
            user.access_keys.forEach(function(key) {
                keysHtml += '<tr>';
                keysHtml += '<td><code>' + escapeHtml(key.access_key) + '</code></td>';
                keysHtml += '<td>';
                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;">';
                keysHtml += '<option value="' + STATUS_ACTIVE + '" ' + (key.status === STATUS_ACTIVE || !key.status ? 'selected' : '') + '>' + STATUS_ACTIVE + '</option>';
                keysHtml += '<option value="' + STATUS_INACTIVE + '" ' + (key.status === STATUS_INACTIVE ? 'selected' : '') + '>' + STATUS_INACTIVE + '</option>';
                keysHtml += '</select>';
                keysHtml += '</td>';
                keysHtml += '<td>';
                // Add "View Secret" button with data attributes
                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) + '">';
                keysHtml += '<i class="fas fa-eye"></i> View Secret';
                keysHtml += '</button>';
                // Delete button
                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) + '">';
                keysHtml += '<i class="fas fa-trash"></i> Delete';
                keysHtml += '</button>';
                keysHtml += '</td>';
                keysHtml += '</tr>';
            });
            
            keysHtml += '</tbody>';
            keysHtml += '</table>';
            keysHtml += '</div>';
            
            // Add delegated event listener for view secret buttons
            setTimeout(() => {
                document.querySelectorAll('.view-secret-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const accessKey = this.getAttribute('data-access-key');
                        const secretKey = this.getAttribute('data-secret-key');
                        showSecretKey(accessKey, secretKey);
                    });
                });
            }, 100);
            
            return keysHtml;
        }

        // Refresh access keys list content
        async function refreshAccessKeysList(username) {
            try {
                const encodedUsername = encodeURIComponent(username);
                const response = await fetch(`/api/users/${encodedUsername}`);
                if (response.ok) {
                    const user = await response.json();
                    document.getElementById('accessKeysContent').innerHTML = createAccessKeysContent(user);
                }
            } catch (error) {
                console.error('Error refreshing access keys:', error);
            }
        }

        // Update access key status
        async function updateAccessKeyStatus(username, accessKey, status) {
            try {
                const response = await fetch(`/api/users/${encodeURIComponent(username)}/access-keys/${encodeURIComponent(accessKey)}/status`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ status: status })
                });

                if (response.ok) {
                    showSuccessMessage('Access key status updated successfully');
                    // Refresh access keys display without toggling modal
                    refreshAccessKeysList(username);
                } else {
                    const error = await response.json();
                        showAlert('Failed to update access key status: ' + (error.error || 'Unknown error'), 'error');
                    refreshAccessKeysList(username);
                }
            } catch (error) {
                console.error('Error updating access key status:', error);
                showAlert('Failed to update access key status: ' + error.message, 'error');
                refreshAccessKeysList(username);
            }
        }

        // Reset and hide the create key form
        function resetCreateKeyForm() {
            document.getElementById('createKeyForm').style.display = 'none';
            document.getElementById('newAccessKeyInput').value = '';
            document.getElementById('newSecretKeyInput').value = '';
            document.getElementById('newSecretKeyInput').type = 'password';
            document.getElementById('secretKeyToggleIcon').className = 'fas fa-eye';
        }

        // Toggle create key form visibility
        function toggleCreateKeyForm() {
            const form = document.getElementById('createKeyForm');
            if (form.style.display === 'none') {
                form.style.display = 'block';
            } else {
                resetCreateKeyForm();
            }
        }

        // Toggle secret key input visibility
        function toggleSecretKeyVisibility() {
            const input = document.getElementById('newSecretKeyInput');
            const icon = document.getElementById('secretKeyToggleIcon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.className = 'fas fa-eye-slash';
            } else {
                input.type = 'password';
                icon.className = 'fas fa-eye';
            }
        }

        // Reset form when modal is dismissed
        document.getElementById('accessKeysModal').addEventListener('hidden.bs.modal', resetCreateKeyForm);

        // Create new access key
        var isCreatingKey = false;
        async function createAccessKey() {
            if (isCreatingKey) return;

            const username = document.getElementById('accessKeysUsername').textContent;
            const accessKeyInput = document.getElementById('newAccessKeyInput');
            const secretKeyInput = document.getElementById('newSecretKeyInput');
            if ((accessKeyInput.value.trim() && !accessKeyInput.reportValidity()) ||
                (secretKeyInput.value.trim() && !secretKeyInput.reportValidity())) {
                return;
            }
            const accessKey = accessKeyInput.value.trim();
            const secretKey = secretKeyInput.value.trim();

            const body = {};
            if (accessKey) body.access_key = accessKey;
            if (secretKey) body.secret_key = secretKey;

            isCreatingKey = true;
            const createBtn = document.querySelector('#createKeyForm .btn-primary');
            const cancelBtn = document.querySelector('#createKeyForm .btn-secondary');
            if (createBtn) createBtn.disabled = true;
            if (cancelBtn) cancelBtn.disabled = true;

            try {
                const encodedUsername = encodeURIComponent(username);
                const response = await fetch(`/api/users/${encodedUsername}/access-keys`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(body)
                });

                if (response.ok) {
                    const result = await response.json();

                    // Show the new access key details
                    if (result.access_key) {
                        showNewAccessKeyModal(result.access_key);
                    }

                    showSuccessMessage('Access key created successfully');
                    resetCreateKeyForm();

                    // Refresh access keys display
                    refreshAccessKeysList(username);
                } else {
                    const error = await response.json();
                        showAlert('Failed to create access key: ' + (error.error || 'Unknown error'), 'error');
                }
            } catch (error) {
                console.error('Error creating access key:', error);
                showAlert('Failed to create access key: ' + error.message, 'error');
            } finally {
                isCreatingKey = false;
                if (createBtn) createBtn.disabled = false;
                if (cancelBtn) cancelBtn.disabled = false;
            }
        }

        // Delete access key
        async function deleteAccessKey(username, accessKey) {
            showDeleteConfirm(accessKey, async function() {
                try {
                    const encodedUsername = encodeURIComponent(username);
                    const encodedAccessKey = encodeURIComponent(accessKey);
                    const response = await fetch(`/api/users/${encodedUsername}/access-keys/${encodedAccessKey}`, {
                        method: 'DELETE'
                    });
                    
                    if (response.ok) {
                        showSuccessMessage('Access key deleted successfully');
                        
                        // Refresh access keys display
                        refreshAccessKeysList(username);
                    } else {
                        const error = await response.json();
                        showErrorMessage('Failed to delete access key: ' + (error.error || 'Unknown error'));
                    }
                } catch (error) {
                    console.error('Error deleting access key:', error);
                    showErrorMessage('Failed to delete access key: ' + error.message);
                }
            }, 'Are you sure you want to delete this access key?');
        }


        // Utility functions
        function showSuccessMessage(message) {
            // Simple implementation - could be enhanced with toast notifications
            alert('Success: ' + message);
        }

        function showErrorMessage(message) {
            showAlert(message, 'error');
        }

        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
}

// Helper functions for template