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

{% block title %}Benutzer bearbeiten{% endblock %}

{% block header %}
    <div class="container-header">
        <h1 class="display-4">Benutzer bearbeiten</h1>
        <div class="container-status">
            <span class="badge bg-warning text-dark"><i class="fas fa-user-edit me-1"></i>Bearbeitung</span>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}
    <i class="fas fa-users me-2"></i><a href="{{ path('admin_user_index') }}">Benutzerverwaltung</a> &raquo; Benutzer bearbeiten
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card shadow border-start border-bottom">
                <div class="card-body">
                    <h2 class="card-title mb-4">Benutzerdaten bearbeiten</h2>

                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('error') %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('info') %}
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}

                    {{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}}) }}
                        <div class="mb-4 text-center">
                            {% if user.avatar %}
                                <img src="{{ path('avatar_serve', {'filename': user.avatar}) }}" alt="Profilbild" class="rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
                            {% else %}
                                <div class="avatar-placeholder mb-3">
                                    <i class="fas fa-user fa-4x"></i>
                                </div>
                            {% endif %}
                            <div class="mb-3">
                                {{ form_widget(form.avatarFile, {'attr': {'class': 'form-control'}}) }}
                                <div class="form-text">Max. 2MB, erlaubte Formate: JPG, PNG, GIF</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="user_email" class="form-label">E-Mail</label>
                            {{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'beispiel@domain.de'}}) }}
                        </div>
                        <div class="mb-3">
                            <label for="user_plainPassword" class="form-label">Neues Passwort (optional)</label>
                            {{ form_widget(form.plainPassword, {'attr': {'class': 'form-control', 'placeholder': 'Neues Passwort'}}) }}
                            <div class="form-text">Nur ausfüllen, wenn das Passwort geändert werden soll.</div>
                        </div>
                        <div class="mb-3">
                            <label for="user_firstName" class="form-label">Vorname</label>
                            {{ form_widget(form.firstName, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="mb-3">
                            <label for="user_lastName" class="form-label">Nachname</label>
                            {{ form_widget(form.lastName, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Rollen</label>
                            <div class="d-flex flex-column gap-2">
                                {{ form_widget(form.roles) }}
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <a href="{{ path('admin_user_index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Zurück
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save me-2"></i>Speichern
                            </button>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card-title {
    font-size: 1.5rem;
    font-weight: 600;
}
</style>
{% endblock %}