{% extends "base.html" %}

{% block title %}Admin | Userverwaltung{% endblock %}

{% block content %}
<section class="panel">
    <h1>Userverwaltung</h1>
    <p>Benutzer verwalten, Admin-Rechte vergeben und Konten bereinigen.</p>
</section>

<section class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Benutzername</th>
                <th>Name</th>
                <th>Rolle</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td>{{ user.username }}</td>
                <td>{{ user.display_name }}</td>
                <td>{{ 'Admin' if user.is_admin else 'Nutzer' }}</td>
                <td>
                    <form method="post" class="actions">
                        <input type="hidden" name="username" value="{{ user.username }}">
                        <select name="action" required>
                            <option value="">Aktion wählen</option>
                            {% if not user.is_admin %}
                            <option value="make_admin">Zu Admin machen</option>
                            {% else %}
                            <option value="remove_admin">Admin-Rechte entziehen</option>
                            {% endif %}
                            <option value="delete_user">Benutzer löschen</option>
                        </select>
                        <button type="submit">Ausführen</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>

<style>
.panel { margin-bottom: 1rem; }
.table-wrap { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem; border-bottom: 1px solid #e8eef2; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
select { border: 1px solid #bcd0de; background: #fff; padding: 0.4rem 0.55rem; border-radius: 10px; font: inherit; }
button { border: 1px solid #bcd0de; background: #fff; padding: 0.4rem 0.65rem; border-radius: 999px; font-weight: 700; cursor: pointer; }
</style>
{% endblock %}