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

{% block title %}Administration{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/globals/bulles.css') }}">
    <link rel="stylesheet" href="{{ asset('styles/globals/form.css') }}">
{% endblock %}

{% block titlePage %}
    <div class="bulle-container">
        <div class="bulle bulle-all-col bulle-nohover bulle-header">
            <h1 class="bulle-title">Administration : Users</h1>
        </div>
    </div>
{% endblock %}

{% block main %}
    <div class="bulle-container">
        {{ form_start(form, { attr: { class: 'bulle bulle-all-col form-wrapper' } }) }}

        <div class="form-wrapper__row">

            {# Colonne gauche : pseudo + password + joueur #}
            <div class="form-wrapper__col">
                <div class="form-group">
                    {{ form_label(form.pseudo, "", { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(form.pseudo, { attr: { class: 'form-input' } }) }}
                    {{ form_errors(form.pseudo) }}
                </div>

                <div class="form-group">
                    {{ form_label(form.password, "", { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(form.password, { attr: { class: 'form-input' } }) }}
                    {{ form_errors(form.password) }}
                </div>

                <div class="form-group">
                    {{ form_label(form.joueur, "", { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(form.joueur, { attr: { class: 'form-input form-select' } }) }}
                    {{ form_errors(form.joueur) }}
                </div>
            </div>

            {# Colonne droite : rôles + theme #}
            <div class="form-wrapper__col">
                <div class="form-group">
                    {{ form_label(form.roles, "", { label_attr: { class: 'form-label' } }) }}
                    <div class="form-checkbox-group">
                        {% for role in form.roles %}
                            <label class="form-checkbox-group-item">
                                {{ form_widget(role) }}
                                <span>{{ form_label(role) }}</span>
                            </label>
                        {% endfor %}
                    </div>
                    {{ form_errors(form.roles) }}
                </div>

            </div>

        </div>

        <div class="form-wrapper__footer">
            <a href="{{ path('app_admin_users') }}" class="form-btn form-btn--cancel">Annuler</a>
            <button type="submit" class="form-btn">Enregistrer</button>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}