{% extends "base.html" %}
{% block title %}Benutzerverwaltung{% endblock %}
{% block content %}

<div class="page-header">
    <h2>Benutzerverwaltung</h2>
    <p class="page-lead"><a href="/dashboard">← Zurück zum Dashboard</a></p>
</div>

<div class="layout-2col">
    <div class="main-col">
        <section class="card card-accent-orange">
            <div class="card-header">
                <h3>Neuen Benutzer anlegen</h3>
            </div>
            {% if error_message %}
            <p class="error">{{ error_message }}</p>
            {% endif %}
            {% if success_message %}
            <p class="hint" style="color:var(--tk-success);font-weight:600;">{{ success_message }}</p>
            {% endif %}
            <form method="post" action="/admin/users" class="form-grid">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div class="form-row">
                    <label>E-Mail
                        <input type="email" name="email" required placeholder="name@firma.de">
                    </label>
                    <label>Vollständiger Name
                        <input type="text" name="full_name" required>
                    </label>
                </div>
                <div class="form-row">
                    <label>Passwort
                        <input type="password" name="password" required minlength="10" placeholder="Mindestens 10 Zeichen">
                    </label>
                    <label>Rolle
                        <select name="role">
                            <option value="reader">Leser (nur ansehen)</option>
                            <option value="editor">Editor (generieren &amp; senden)</option>
                            <option value="admin">Admin (voller Zugriff)</option>
                        </select>
                    </label>
                </div>
                <button type="submit" class="btn-primary">Benutzer erstellen</button>
            </form>
        </section>

        <section class="card">
            <div class="card-header">
                <h3>Bestehende Benutzer <span class="count-badge">{{ users|length }}</span></h3>
            </div>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr><th>E-Mail</th><th>Name</th><th>Rolle</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                    {% for u in users %}
                        <tr>
                            <td>{{ u.email }}</td>
                            <td>{{ u.full_name }}</td>
                            <td><span class="badge badge-{{ u.role }}">{{ u.role }}</span></td>
                            <td>{{ "Aktiv" if u.is_active else "Inaktiv" }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </div>

    <aside class="sidebar-col">
        <div class="sidebar-card">
            <h4>Rollen</h4>
            <ul>
                <li><strong>Leser</strong> – Newsletter ansehen</li>
                <li><strong>Editor</strong> – Generieren &amp; senden</li>
                <li><strong>Admin</strong> – Benutzer &amp; SMTP</li>
            </ul>
        </div>
    </aside>
</div>

{% endblock %}