templates/admin/users.html

<div class="admin-section" id="section-users">
    <!-- Premium Welcome Banner -->
    <div class="welcome-banner compact admin-banner">
        <div class="welcome-text">
            <h1>User Directory</h1>
            <p>Administer access, monitor balances, and enforce security policies across all accounts.</p>
        </div>
        <div class="dashboard-controls">
            <button class="btn-premium small" onclick="loadUserManagement()">
                <i class="fa-solid fa-sync"></i> Refresh List
            </button>
        </div>
        <div class="admin-banner-decoration"></div>
    </div>

    <!-- Stats & Filters Toolbar -->
    <div class="users-toolbar animate-up">
        <div class="wallet-kpi-grid wallet-kpi-grid-inline">
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent"></div>
            <div class="wallet-kpi-label">Total Users</div>
            <div class="wallet-kpi-value" id="total-users-val">0</div>
        </div>
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent balance"></div>
            <div class="wallet-kpi-label">Active Accounts</div>
            <div class="wallet-kpi-value" id="active-users-val">0</div>
        </div>
        <div class="wallet-kpi-card">
            <div class="wallet-kpi-accent low-balance"></div>
            <div class="wallet-kpi-label">Disabled / Blocked</div>
            <div class="wallet-kpi-value" id="disabled-users-val">0</div>
        </div>
    </div>
     <div class="wallet-controls wallet-controls-inline">
            <div class="wallet-search-wrap wallet-search-wrap-inline">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" id="user-mgmt-search" placeholder="Search ID, Name or Phone..." oninput="applyUserMgmtFilters()" class="input-hover-effect">
            </div>
            <div class="u-filter-tabs-metallic">
                <button class="u-tab-m active" onclick="filterUserMgmt('all', this)">All</button>
                <button class="u-tab-m" onclick="filterUserMgmt('admin', this)">Admins</button>
                <button class="u-tab-m" onclick="filterUserMgmt('admin-user', this)">Agents</button>
                <button class="u-tab-m" onclick="filterUserMgmt('user', this)">Users</button>
            </div>
        </div>
    </div>

    <!-- Metallic Users Grid -->
    <div class="users-grid-universal animate-up" id="users-mgmt-grid">
        <!-- Cards injected via JS -->
    </div>

    <!-- Change Password Modal -->
    <div id="user-change-pass-modal" class="custom-modal">
        <div class="auth-card-metallic">
            <div class="modal-header-primary">
                <i class="fa-solid fa-key"></i>
                <h3>Change User Password</h3>
            </div>
            <p class="change-pass-info">Confirm to change user password.</p>
            
            <div class="security-prompt">
                <label>New Password:</label>
                <div class="input-metallic-group">
                    <i class="fa-solid fa-lock"></i>
                    <input type="text" id="change-pass-new" readonly>
                </div>
            </div>

            <p class="error-text" id="change-pass-error"></p>

            <div class="button-group-metallic">
                <button onclick="closeChangePasswordModal()" class="btn-metallic secondary">Cancel</button>
                <button id="final-change-pass-btn" class="btn-metallic primary">Confirm Change</button>
            </div>
        </div>
    </div>

    <!-- Secure Deletion Modal (Role-Based and Protected) -->
    <div id="user-delete-modal" class="custom-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1000; justify-content: center; align-items: center;">
        <div class="auth-card-metallic delete-box hover" style="background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; max-width: 450px; width: 90%; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden;">
            <div style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 24px 20px; text-align: center;">
                <i class="fa-solid fa-triangle-exclamation" style="font-size: 2.2rem; margin-bottom: 12px; display: block;"></i>
                <h3 style="margin: 0; font-size: 1.4rem; font-weight: 600;">Delete User Account</h3>
            </div>
            <div style="padding: 28px;">
                <p style="background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-left: 4px solid #ef4444; padding: 16px; border-radius: 10px; margin-bottom: 24px; color: var(--text-color); font-size: 0.95rem;">
                    <i class="fa-solid fa-circle-exclamation" style="color: #ef4444; margin-right: 10px;"></i>
                    <strong id="delete-target-name" style="color: #ef4444;"></strong> will be permanently deleted. This action cannot be undone.
                </p>
                
                <div style="margin-bottom: 24px;">
                    <label style="display: block; margin-bottom: 10px; font-weight: 500; color: var(--text-muted); font-size: 0.9rem;">
                        <i class="fa-solid fa-shield-halved" style="margin-right: 8px; color: var(--primary-color);"></i>
                        Enter Admin Password to Confirm:
                    </label>
                    <div class="input-metallic-group input-hover" style="display: flex; align-items: center; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; transition: var(--transition);">
                        <i class="fa-solid fa-key" style="color: var(--text-muted); margin-right: 14px; font-size: 1rem;"></i>
                        <input type="password" id="admin-auth-pass" placeholder="Enter your admin password" style="flex: 1; background: transparent; border: none; color: var(--text-color); font-size: 1rem; outline: none;">
                    </div>
                    <p class="error-text" id="delete-error" style="color: #ef4444; font-size: 0.85rem; margin-top: 10px; min-height: 20px;"></p>
                </div>

                <div style="display: flex; gap: 14px;">
                    <button onclick="closeDeleteModal()" class="btn-hover" style="flex: 1; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <i class="fa-solid fa-xmark"></i>Cancel
                    </button>
                    <button id="final-delete-btn" class="btn-hover" style="flex: 1; padding: 14px 20px; border-radius: 12px; border: none; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; font-weight: 600; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <i class="fa-solid fa-trash-can"></i>Delete User
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>