{% form_theme form 'form/checkbox.html.twig' %}
<div {{attributes}}>
    <h1 class="text-center text-primary">{{ 'profile.title'|trans }}</h1>

    <div class="card p-4 rounded-4 my-4 shadow">
        <h2 class="text-primary h1">{{ 'profile.picture'|trans }}</h2> 
        {% if userDocument %}             
             <twig:PictureComponent userDocument="{{userDocument}}" path="{{userDocument.path}}" rounded="{{true}}" col="4"/>
    
        {% else %}
        <twig:FileUploadComponent fileType="PP" />
        {% endif %}
    </div>
    {{ form_start(form, {
    attr: {
    'data-action': 'live#action:prevent',
    'data-live-action-param': 'save',
    }
    }) }}


    <div class="card p-4 rounded-4 my-4 shadow">
        <h2 class="text-primary h1">{{ 'profile.personal_info'|trans }}<span
                class="badge text-light bg-fc float-end rounded-circle">1</span></h2>
        {{form_row(form.completeName)}}
        {{form_row(form.phone)}}
    </div>

    <div class="card p-4 rounded-4 my-4 shadow">
        <h2 class="text-primary h1">{{ 'profile.room'|trans }}<span
                class="badge text-light bg-fc float-end rounded-circle">2</span></h2>
        {{form_row(form.parentChambre)}}
        {% if form.chambre is defined %}
        {{form_row(form.chambre)}}
        {% endif %}
    </div>
    <div class="card p-4 rounded-4 my-4 shadow">
        <h2 class="text-primary h1">{{ 'profile.billing_address'|trans }} <span
                class="badge text-light bg-fc float-end rounded-circle">3</span></h2>
        {{form_row(form.address)}}
        {{form_row(form.postalCode)}}
    </div>
    <div class="d-grid">
        <button class="btn btn-primary col-6 rounded-4 mx-auto">{{ "btn.signUp"|trans }}</button>
    </div>
    {{form_end(form)}}
</div>