{% extends 'admin/base.html.twig' %}

{% block title %}Benutzer anlegen{% endblock %}

{% block body %}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <h1 class="h3 mb-1">
                <i class="bi bi-person-plus-fill"></i> Benutzer anlegen
            </h1>
            <div class="small text-muted">
                Neuer Zugang für Chat, Adminbereich oder Systempflege.
            </div>
        </div>
        <a href="{{ path('admin_users_index') }}" class="btn btn-sm btn-outline-secondary">
            Zurück zur Liste
        </a>
    </div>

    {% for message in app.flashes('danger') %}
        <div class="alert alert-danger shadow-sm">{{ message }}</div>
    {% endfor %}

    <div class="card bg-black border-secondary text-light shadow-sm">
        <div class="card-body">
            <form method="post" action="{{ path('admin_users_create') }}" autocomplete="off">
                <input type="hidden" name="_token" value="{{ csrf_token('admin_user_create') }}">

                <div class="row g-4">
                    <div class="col-lg-6">
                        <label class="form-label" for="user-email">E-Mail</label>
                        <input id="user-email"
                               type="email"
                               name="email"
                               required
                               class="form-control bg-dark text-light border-secondary"
                               autocomplete="off">
                    </div>

                    <div class="col-lg-3">
                        <label class="form-label" for="user-password">Passwort</label>
                        <input id="user-password"
                               type="password"
                               name="password"
                               required
                               minlength="8"
                               class="form-control bg-dark text-light border-secondary"
                               autocomplete="new-password">
                    </div>

                    <div class="col-lg-3">
                        <label class="form-label" for="user-password-repeat">Passwort wiederholen</label>
                        <input id="user-password-repeat"
                               type="password"
                               name="password_repeat"
                               required
                               minlength="8"
                               class="form-control bg-dark text-light border-secondary"
                               autocomplete="new-password">
                    </div>
                </div>

                <hr class="border-secondary my-4">

                <div class="row g-4">
                    <div class="col-lg-7">
                        <h2 class="h5 text-info mb-3">Rollen</h2>
                        <div class="row g-2">
                            {% for role, label in role_choices %}
                                <div class="col-md-6">
                                    <label class="form-check bg-dark border border-secondary rounded p-3 h-100">
                                        <input class="form-check-input me-2"
                                               type="checkbox"
                                               name="roles[]"
                                               value="{{ role }}">
                                        <span class="form-check-label">
                                            <strong>{{ label }}</strong><br>
                                            <span class="small text-muted">{{ role }}</span>
                                        </span>
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <h2 class="h5 text-info mb-3">Status</h2>
                        <label class="form-check form-switch bg-dark border border-secondary rounded p-3 ps-5">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                            <span class="form-check-label">Benutzer ist aktiv</span>
                        </label>

                        <div class="alert alert-info mt-3 mb-0 small">
                            <strong>Hinweis:</strong> Deaktivierte Benutzer können sich weder im Chat noch im Adminbereich anmelden.
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ path('admin_users_index') }}" class="btn btn-outline-secondary">Abbrechen</a>
                    <button class="btn btn-outline-info" type="submit">Benutzer erstellen</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}