{# templates/usagerlogin/login.html.twig #}
{#
    {% form_theme form 'form/fields.html.twig' %}
#}
{% extends 'base.html.twig' %}
{% block entete %}
    {{ include('entete.html.twig') }}

{% endblock %}
{% block corps %}
    <div class="msgerreur">
        {{ form_errors(form) }}
    </div>
    <section class='inscription'>
        <h2>Votre profil</h2>
        {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
        <div class="text-field-container">
            <div class="mdc-text-field">
                <input type="text" id= "form_nom" name="form[{{ form.nom.vars.name }}]" class="mdc-text-field__input" required="required" value="{{ form.nom.vars.value }}">
                <label class="mdc-floating-label" for="form_nom">{{ form.nom.vars.label }}</label>
                <div class="mdc-line-ripple"></div>
            </div>
            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg mdc-text-field-helper-text--persistent">{{ form_errors(form.nom) }}</p>
        </div>
       
        <div class="text-field-container">
            <div class="mdc-text-field">
                <input type="text" id= "form_username" name="form[{{ form.username.vars.name }}]" class="mdc-text-field__input" required="required" value="{{ form.username.vars.value }}">
                <label class="mdc-floating-label" for="form_username">{{ form.username.vars.label }}</label>
                <div class="mdc-line-ripple"></div>
            </div>
            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg mdc-text-field-helper-text--persistent">{{ form_errors(form.username) }}</p>
        </div>
        <div class="text-field-container">
            <div class="mdc-text-field">
                <input type="password"  id= "form_password_first" name="form[password][first]" class="mdc-text-field__input" required="required">
                <label class="mdc-floating-label" for="form_password_first">Mot de passe</label>
                <div class="mdc-line-ripple"></div>
            </div>
            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg mdc-text-field-helper-text--persistent">{{ form_errors(form.password.first) }}</p>
        </div>
        <div class="text-field-container">
            <div class="mdc-text-field">
                <input type="password"  id= "form_password_second" name="form[password][second]" class="mdc-text-field__input" required="required">
                <label class="mdc-floating-label" for="form_password_second">Répéter le mot de passe</label>
                <div class="mdc-line-ripple"></div>
            </div>
            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg mdc-text-field-helper-text--persistent">{{ form_errors(form.password.second) }}</p>
        </div>
        <div class="text-field-container">
        {{ form_widget(form._token) }}

        <button class="mdc-button mdc-button--raised mdc-ripple-upgraded" type="submit" id="form_save" name="form[save]">S'inscrire</button>
        <!--{{form_widget(form.save) }}    -->
        </div>
        
    {{ form_end(form, {'render_rest': false} )  }}
 </section>
<script type="application/javascript">
    /*document.querySelector(".btn_send").addEventListener("click", function(){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:8080/election/ajaxlogin");
        xhr.setRequestHeader("Content-Type", "application/json");

        var formData = new FormData(document.querySelector("form"));
        var data = {
            'username': document.querySelector('[name=_username]').value,
            'password': document.querySelector('[name=_password]').value
        };
        xhr.addEventListener('load', function(e){
            var reponse = JSON.parse(e.currentTarget.response);
            if(e.currentTarget.status == 200)   // Succès
            {
                console.log(reponse);
                window.location = reponse.url;
            }
            else
            {
                var erreur = reponse.error || ''
                document.querySelector(".msgerreur").innerHTML = erreur;
            }
            console.log(e);
        });
        xhr.send(JSON.stringify(data));

    });
*/

</script>
{%  endblock %}

{% block javascripts %}

<script src="{{ asset("build/js/app.js") }}"></script>

{% endblock %}