{% import 'shared/componnents/_macros/_forms.html.twig' as forms %}
{% import 'shared/componnents/_macros/_alerts.html.twig' as alerts %}

{% set path = path ?? null %}
{% set path_list =  path_list ?? null %}
{% set label_btn = label_btn ?? '' %}
{% set class_alert = class_alert ?? null %}

<section class="content">
    <div class="box box-default">
        {% for message in app.flashes('success') %}
            {{ alerts.alert(message, class_alert, 'check') }}
        {% endfor %}
        {% for message in app.flashes('error') %}
            {{ alerts.alert(message, 'error', 'check') }}
        {% endfor %}
        <form  action="{{ path }}" enctype="multipart/form-data" method="post">
            {{ form_widget(form._token) }}
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form_label(form.civility) }}
                            {{ form_widget(form.civility) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        {{ form_label(form.email) }}
                        <div class="form-group {% if form.email.vars.valid == false %} has-error {% endif %}">
                            {{ form_widget(form.email) }}
                            {% if form.email.vars.errors|length %} 
                                <label class="control-label has-error">                            
                                    {{ 'forms.email_already_exist'|trans }}                                          
                                </label>                        
                            {% endif %}
                        </div>                                                
                    </div>  
                    <div class="col-md-6">    
                        <div class="form-group">
                            {{ form_label(form.firstName) }}                            
                            {{ form_widget(form.firstName) }}
                        </div>    
                    </div>
                    <div class="col-md-6">    
                        <div class="form-group">
                            {{ form_label(form.lastName) }}                            
                            {{ form_widget(form.lastName) }}
                        </div>    
                    </div>
                    <div class="col-md-6">                            
                        <label>Mot de passe</label>
                        <div class="input-group {% if form.password.first.vars.valid == false %} has-error {% endif %}">                                                 
                            {{ form_widget(form.password.first, {'attr': {'class': 'input-first-password form-control'}}) }}
                            <span class="input-group-addon">
                                <i id="first-icon-eye" class="hide-show-first-password pointer fa fa-fw fa-eye-slash"></i>
                            </span>
                        </div>
                        {% if form.password.first.vars.errors|length %} 
                            <label class="control-label has-error">                            
                                {{ 'forms.password_fields_must_match'|trans }}                                          
                            </label>                        
                        {% endif %}
                    </div>
                    <div class="col-md-6">                            
                        <label>Confirmé mot de passe</label>
                        <div class="input-group {% if form.password.first.vars.valid == false %} has-error {% endif %}">                                                          
                            {{ form_widget(form.password.second, {'attr': {'class': 'input-second-password form-control'}}) }}
                            <span class="input-group-addon">
                                <i id="second-icon-eye" class="hide-show-second-password pointer fa fa-fw fa-eye-slash"></i>
                            </span>
                        </div>
                        {% if form.password.first.vars.errors|length %}
                            <label class="control-label has-error">                            
                                {{ 'forms.password_fields_must_match'|trans }}                                          
                            </label>                                       
                        {% endif %}                        
                    </div>
                    <div class="col-md-6 mt-1">                                                    
                        {{ form_label(form.document.path) }}
                        <div class="form-group">                                                                                      
                            {{ form_widget(form.document.path) }}
                            {% if form.document.path.vars.errors|length %}
                                <label class="control-label {% if form.document.path.vars.valid == false %} has-error {% endif %}">
                                    <i class="fa fa-times-circle-o"></i>
                                    {{ form.document.path.vars.errors[0].message }}
                                </label>
                            {% endif %} 
                        </div>                                            
                    </div>
                    <div class="col-md-6 mt-1">
                        {{ form_label(form.roles) }}
                        {{ form_widget(form.roles) }}
                    </div>
                </div>
                <div class="row mt-1">
                    <div class="col-md-12">                            
                        <div class="pull-right">
                            {{ forms.button(path_list, 'danger', 'Retour à liste') }}
                            {{ form_widget(form.submit,{'label': label_btn,
                                attr:{'class':'btn btn-primary'}}) }}
                        </div>                
                    </div>
                </div>                
            </div>
        </form>
    </div>
</section>