{% extends "admin/base.html" %} {% block title %}Users - Admin{% endblock %} {%
block content %}
<div class="page-header">
    <h1>Users</h1>
</div>

{% if error %}
<div
    class="alert alert-error"
    style="
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid var(--color-danger, #dc3545);
        border-radius: var(--radius, 4px);
        color: var(--color-danger, #dc3545);
    "
>
    {{ error }}
</div>
{% endif %}

<div class="card">
    <h2>Add User</h2>
    <form method="post" action="/admin/users" class="form-inline">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required />
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required />
        </div>
        <div class="form-group">
            <label for="role">Role</label>
            <select id="role" name="role">
                <option value="author">Author</option>
                <option value="admin">Admin</option>
                <option value="viewer">Viewer</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Add User</button>
    </form>
</div>

<div class="card">
    <h2>All Users</h2>
    <table class="table">
        <thead>
            <tr>
                <th>Username</th>
                <th>Email</th>
                <th>Role</th>
                <th>Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for u in users %}
            <tr>
                <td><strong>{{ u.username }}</strong></td>
                <td>{{ u.email }}</td>
                <td>
                    <span
                        class="badge {% if u.role == 'admin' %}badge-primary{% elif u.role == 'author' %}badge-success{% else %}badge-secondary{% endif %}"
                    >
                        {{ u.role }}
                    </span>
                </td>
                <td>{{ u.created_at | format_date }}</td>
                <td>
                    {% if u.id != user.id %}
                    <form
                        method="post"
                        action="/admin/users/{{ u.id }}/delete"
                        style="display: inline"
                    >
                        <button
                            type="submit"
                            class="btn btn-small btn-danger"
                            data-username="{{ u.username }}"
                            onclick="
                                return confirm(
                                    'Delete user ' +
                                        this.dataset.username +
                                        '?',
                                );
                            "
                        >
                            Delete
                        </button>
                    </form>
                    {% else %}
                    <span class="text-muted">(you)</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="5">No users found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}