{% extends "base.html" %}
{% block title %}Dungeon Dashboard{% endblock %}
{% block content %}
<div class="header">
    <h1>Dungeon Dashboard</h1>
    <form method="POST" action="/__dungeon/logout" style="margin: 0;">
        <button type="submit" style="width: auto; margin: 0; padding: 0.5rem 1rem;">Logout ({{ current_user.username
            }})</button>
    </form>
</div>

{% if let Some(err) = error %}
<div class="error">{{ err }}</div>
{% endif %}

<div class="dashboard-container">
    <div style="flex: 2;">
        <h3>Users</h3>
        <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.id }}</td>
                        <td>{{ user.username }}</td>
                        <td><span
                                style="padding: 0.25rem 0.5rem; background: var(--bg); border-radius: 4px; font-size: 0.875rem;">{{
                                user.role }}</span></td>
                        <td>
                            {% if current_user.role == "admin" %}
                            <div class="flex gap-2" style="align-items: center;">
                                {% if user.id != current_user.id %}
                                <form method="POST" action="/__dungeon/users/delete/{{ user.id }}" style="margin: 0;">
                                    <button type="submit" class="btn-danger"
                                        style="padding: 0.25rem 0.5rem; margin: 0; font-size: 0.875rem;">Delete</button>
                                </form>
                                {% endif %}
                                <form method="POST" action="/__dungeon/users/password/{{ user.id }}"
                                    style="margin: 0; display: flex; gap: 0.5rem;">
                                    <input type="password" name="password" placeholder="New Password" required
                                        style="margin: 0; padding: 0.25rem 0.5rem; width: 120px;">
                                    <button type="submit"
                                        style="padding: 0.25rem 0.5rem; margin: 0; font-size: 0.875rem; width: auto;">Change</button>
                                </form>
                            </div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if current_user.role == "admin" %}
    <div style="flex: 1;">
        <div class="card" style="margin: 0; max-width: 100%;">
            <h3 style="margin-top: 0;">Add User</h3>
            <form method="POST" action="/__dungeon/users/add">
                <label>Username</label>
                <input type="text" name="username" required>
                <label>Password</label>
                <input type="password" name="password" required>
                <label>Role</label>
                <select name="role">
                    <option value="readonly">Read Only</option>
                    <option value="admin">Admin</option>
                </select>
                <button type="submit">Create User</button>
            </form>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}