{% extends 'swimmonitor/base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}Benutzer bearbeiten{% endblock %}
{% block page_modifier %} sm-page--narrow{% endblock %}

{% block breadcrumb %}
    <li>Administration</li>
    <li><a href="{{ path('admin_user_index') }}">Benutzer</a></li>
    <li>{{ user.firstName }} {{ user.lastName }}</li>
{% endblock %}

{% block page_head %}
    <div>
        <h1>{{ user.firstName }} {{ user.lastName }}</h1>
        <p class="sm-lead">Profil, Zugangsdaten und Rollen bearbeiten.</p>
    </div>
{% endblock %}

{% block content %}
    {{ form_start(form, {attr: {enctype: 'multipart/form-data', class: 'sm-panel'}}) }}
        <div class="sm-panel-body sm-form">
            <fieldset class="sm-fieldset">
                <legend>Profilbild</legend>
                <div class="sm-avatar-row">
                    <span class="sm-initials sm-initials--light sm-initials--xl">
                        {%- if user.avatar -%}
                            <img src="{{ path('avatar_serve', {filename: user.avatar}) }}" alt="Profilbild">
                        {%- else -%}
                            {{ (user.firstName|first ~ user.lastName|first)|upper }}
                        {%- endif -%}
                    </span>
                    <div class="flex-grow-1">
                        {{ form_widget(form.avatarFile) }}
                        <div class="form-text">Max. 2 MB, erlaubt sind JPG, PNG und GIF.</div>
                        {{ form_errors(form.avatarFile) }}
                    </div>
                </div>
            </fieldset>

            <fieldset class="sm-fieldset">
                <legend>Zugang</legend>
                <div class="sm-form-grid">
                    <div class="sm-span-2">{{ form_row(form.email, {label: 'E-Mail', attr: {placeholder: 'beispiel@domain.de'}}) }}</div>
                    <div>{{ form_row(form.firstName, {label: 'Vorname'}) }}</div>
                    <div>{{ form_row(form.lastName, {label: 'Nachname'}) }}</div>
                    <div class="sm-span-2">{{ form_row(form.plainPassword, {label: 'Neues Passwort (optional)', help: 'Nur ausfüllen, wenn das Passwort geändert werden soll.'}) }}</div>
                </div>
            </fieldset>

            <fieldset class="sm-fieldset">
                <legend>Rollen</legend>
                {{ form_widget(form.roles) }}
                {{ form_errors(form.roles) }}
            </fieldset>

            {{ form_rest(form) }}
        </div>
        <div class="sm-panel-foot">
            <a href="{{ path('admin_user_index') }}" class="btn btn-secondary">Zurück</a>
            <button type="submit" class="btn btn-primary">Speichern</button>
        </div>
    {{ form_end(form) }}
{% endblock %}