{% extends "base.html" %}

{% block title %}Admin Dashboard - ASF TestArena{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="admin-header">
        <h2>User Management</h2>
        <button class="btn btn-primary" onclick="openModal('createUserModal')">+ Create User</button>
    </div>
    
    <table class="user-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Role</th>
                <th>Created At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>
                    {% if user.is_admin %}
                    <span class="badge badge-admin">Admin</span>
                    {% else %}
                    <span class="badge badge-user">User</span>
                    {% endif %}
                </td>
                <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                <td>
                    <button class="btn btn-sm btn-primary" onclick="openResetPasswordModal({{ user.id }}, '{{ user.username }}')">Reset Password</button>
                    {% if user.id != current_user.id %}
                    <form method="POST" action="{{ url_for('admin.delete_user', user_id=user.id) }}" style="display: inline;">
                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete user {{ user.username }}?')">Delete</button>
                    </form>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Create User Modal -->
<div id="createUserModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Create New User</h3>
            <button class="close-btn" onclick="closeModal('createUserModal')">&times;</button>
        </div>
        <form method="POST" action="{{ url_for('admin.create_user') }}">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" name="is_admin">
                    Admin User
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Create User</button>
        </form>
    </div>
</div>

<!-- Reset Password Modal -->
<div id="resetPasswordModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Reset Password</h3>
            <button class="close-btn" onclick="closeModal('resetPasswordModal')">&times;</button>
        </div>
        <form id="resetPasswordForm" method="POST">
            <p>Reset password for: <strong id="resetUsername"></strong></p>
            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" id="new_password" name="new_password" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary">Reset Password</button>
        </form>
    </div>
</div>

<script>
function openModal(modalId) {
    document.getElementById(modalId).classList.add('active');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.remove('active');
}

function openResetPasswordModal(userId, username) {
    document.getElementById('resetUsername').textContent = username;
    document.getElementById('resetPasswordForm').action = `/admin/users/${userId}/reset-password`;
    openModal('resetPasswordModal');
}

// Close modal when clicking outside
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.classList.remove('active');
    }
}
</script>
{% endblock %}