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

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


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

        <div class="form-wrapper__row">
            <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.bio, "" , { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(form.bio, { attr: { class: 'form-input' } }) }}
                    {{ form_errors(form.bio) }}
                </div>
            </div>
            <div class="form-wrapper__col">
                <div class="form-group">
                    {{ form_label(form.uri_pp, "" , { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(form.uri_pp, { attr: { class: 'form-input' } }) }}
                    {{ form_errors(form.uri_pp) }}
                </div>
                <div class="form-group">
                    {{ form_label(form.profile_picture_file, "" , { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(form.profile_picture_file, { attr: { class: 'form-file' } }) }}
                    {{ form_help(form.profile_picture_file, { help_attr: { class: 'form-helper' } } ) }}
                    {{ form_errors(form.profile_picture_file) }}
                </div>
            </div>
        </div>

        <div class="form-wrapper__footer">
            <button type="submit" class="form-btn">Enregistrer</button>
        </div>

        {{ form_end(form) }}
    </div>
{% endblock %}