<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Arial', sans-serif;
        }
        .navbar {
            background-color: #343a40;
        }
        .navbar-brand, .navbar-nav .nav-link {
            color: #ffffff;
        }
        .navbar-brand:hover, .navbar-nav .nav-link:hover {
            color: #adb5bd;
        }
        .sidebar {
            background-color: #343a40;
            color: #fff;
            height: 100vh;
            position: fixed;
            width: 250px;
            top: 0;
            left: 0;
            overflow-y: auto;
        }
        .sidebar .nav-link {
            color: #adb5bd;
        }
        .sidebar .nav-link:hover {
            background-color: #495057;
            color: #fff;
        }
        .content {
            margin-left: 260px;
            padding: 20px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .btn-custom {
            background-color: #007bff;
            color: #fff;
        }
        .btn-custom:hover {
            background-color: #0056b3;
        }
        .search-bar {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Admin Dashboard</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">Logout</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Sidebar -->
    <div class="sidebar">
        <ul class="nav flex-column p-3">
            <li class="nav-item mb-3">
                <a class="nav-link active" href="/">Dashboard</a>
            </li>
            <li class="nav-item mb-3">
                <a class="nav-link" href="/reset_password">Reset Password</a>
            </li>
        </ul>
    </div>

    <!-- Content -->
    <div class="content">
        <h1 class="mb-4">Welcome, Admin!</h1>

        <!-- User Management Section -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">User Management</h5>
            </div>
            <div class="card-body">
                <!-- Search Bar -->
                <form class="search-bar" method="get" action="/">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search users..." value="{{ search_query }}">
                        <button class="btn btn-custom" type="submit">Search</button>
                    </div>
                </form>

                <!-- User Table -->
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>{{ user.username }}</td>
                            <td>{{ user.status }}</td>
                            <td>
                                <a href="/ban_user/{{ user._id }}" class="btn btn-warning btn-sm">Ban</a>
                                <a href="/unban_user/{{ user._id }}" class="btn btn-success btn-sm">Unban</a>
                                <a href="/delete_user/{{ user._id }}" class="btn btn-danger btn-sm">Delete</a>
								<button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#changePasswordModal{{ user['_id'] }}">Change Password</button>
                            </td>
                        </tr>
						<!-- Change Password Modal -->
                            <div class="modal fade" id="changePasswordModal{{ user['_id'] }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Change Password for {{ user['username'] }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="{{ url_for('change_password', user_id=user['_id']) }}">
                                                <div class="mb-3">
                                                    <label for="newPassword" class="form-label">New Password</label>
                                                    <input type="password" class="form-control" id="newPassword" name="new_password" required>
                                                </div>
                                                <button type="submit" class="btn btn-primary w-100">Update Password</button>
                                            </form>
                                        </div>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Add User Section -->
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Add User</h5>
            </div>
            <div class="card-body">
                <form method="post" action="/add_user">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" name="username" id="username" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" name="password" id="password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-custom">Add User</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
