<%- include('../partials/header', { title, user }) %>
<%- include('../partials/sidebar', { path }) %>

<main class="main-content">
    <div id="users-section" class="content-section active">
        <div class="section-header">
            <h2 class="page-title">
                <i class="fas fa-users-cog"></i>
                User Management
            </h2>
            <button class="btn-primary" id="btn-add-user">
                <i class="fas fa-plus"></i> Add User
            </button>
        </div>

        <!-- Statistics Cards -->
        <div class="stats-grid" id="user-stats">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Total Users</div>
                    <div class="stat-value" id="stat-total-users">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon admin">
                    <i class="fas fa-user-shield"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Administrators</div>
                    <div class="stat-value" id="stat-admins">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon superuser">
                    <i class="fas fa-crown"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Superusers</div>
                    <div class="stat-value" id="stat-superusers">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon user">
                    <i class="fas fa-user"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Regular Users</div>
                    <div class="stat-value" id="stat-users">0</div>
                </div>
            </div>
        </div>

        <!-- Users Section -->
        <section class="section users-container">
            <div class="users-toolbar">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" id="user-search" class="search-input" placeholder="Search by username or role...">
                </div>
                <div class="filter-controls">
                    <select id="status-filter" class="filter-select">
                        <option value="all">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="archived">Archived</option>
                    </select>
                    <select id="role-filter" class="filter-select">
                        <option value="all">All Roles</option>
                        <option value="superuser">Superuser</option>
                        <option value="admin">Admin</option>
                        <option value="user">User</option>
                    </select>
                </div>
            </div>

            <!-- Users Grid -->
            <div class="users-grid" id="users-grid">
                <!-- User cards will be loaded here -->
            </div>

            <!-- Empty State -->
            <div class="empty-state" id="users-empty-state" style="display: none;">
                <i class="fas fa-users-slash"></i>
                <h3>No Users Found</h3>
                <p>Try adjusting your search or filter criteria.</p>
            </div>

            <!-- Pagination -->
            <div class="pagination-controls" id="users-pagination" style="display: none;">
                <div class="page-size-selector">
                    <label for="users-page-size">Items per page:</label>
                    <select id="users-page-size" class="filter-select">
                        <option value="10">10</option>
                        <option value="25" selected>25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div class="pagination-buttons">
                    <button class="btn-secondary btn-sm" id="users-prev-page">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <span id="users-page-numbers"></span>
                    <button class="btn-secondary btn-sm" id="users-next-page">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="page-info" id="users-page-info">
                    Showing 0-0 of 0 users
                </div>
            </div>
        </section>
    </div>
</main>

<!-- Add User Modal -->
<div id="add-user-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Add New User</h3>
            <button class="modal-close" id="add-user-close">&times;</button>
        </div>
        <form id="add-user-form" class="edit-form">
            <div class="form-group">
                <label for="new-username">Username</label>
                <input type="text" id="new-username" required>
            </div>
            <div class="form-group">
                <label for="new-password">Password</label>
                <input type="password" id="new-password" required>
            </div>
            <div class="form-group">
                <label for="new-role">Role</label>
                <select id="new-role" required>
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-add-user">Cancel</button>
                <button type="submit" class="btn-primary">Create User</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit User Modal -->
<div id="edit-user-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit User</h3>
            <button class="modal-close" id="edit-user-close">&times;</button>
        </div>
        <form id="edit-user-form" class="edit-form">
            <input type="hidden" id="edit-user-id">
            <div class="form-group">
                <label for="edit-user-username">Username</label>
                <input type="text" id="edit-user-username" required>
            </div>
            <div class="form-group">
                <label for="edit-user-password">New Password (leave blank to keep current)</label>
                <input type="password" id="edit-user-password" placeholder="Optional">
            </div>
            <div class="form-group">
                <label for="edit-user-role">Role</label>
                <select id="edit-user-role" required>
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-edit-user">Cancel</button>
                <button type="submit" class="btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<%- include('../partials/footer') %>
