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

{% block title %}Register{% endblock %}

{% block body %}
    {% for flash_error in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{{ flash_error }}</div>
    {% endfor %}

    <div class="container mt-5">
        <div class="row">
          <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2">
            <div class="login-brand text-center">
              <img src="{{asset('assets/images/logo.png')}}" alt="logo" width="100" class="shadow-light rounded-circle">
            </div>
            <div class="card card-primary">
              <div class="card-header"><h4>Inscription</h4></div>

              <div class="card-body">
              {{ form_start(registrationForm) }}
                <form>
                  <div class="row">
                  <div class="col-12">
                    {{ form_row(registrationForm._token) }}
                    {{ form_errors(registrationForm) }}
                  </div>
                    <div class="form-group col-6">
                      <label for="frist_name">Nom</label>
                      {{ form_widget(registrationForm.nom) }}
                      {{ form_errors(registrationForm.nom) }}
                    </div>
                    <div class="form-group col-6">
                      <label for="last_name">Prenom</label>
                      {{ form_widget(registrationForm.prenom) }}
                      {{ form_errors(registrationForm.prenom) }}
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="email">Email</label>
                      {{ form_widget(registrationForm.email) }}
                      {{ form_errors(registrationForm.email) }}
                    <div class="invalid-feedback">
                    </div>
                  </div>

                  <div class="row">
                    <div class="form-group col-6">
                      <label for="password" class="d-block">Password</label>
                        {{ form_widget(registrationForm.password.first) }}
                        {{ form_errors(registrationForm.password.first) }}
                      <div id="pwindicator" class="pwindicator">
                        <div class="bar"></div>
                        <div class="label"></div>
                      </div>
                    </div>
                    <div class="form-group col-6">
                      <label for="password2" class="d-block">Password Confirmation</label>
                        {{ form_widget(registrationForm.password.second) }}
                        {{ form_errors(registrationForm.password.second) }}
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-6">
                      <label>Adresse</label>
                      {{ form_widget(registrationForm.adresse) }}
                      {{ form_errors(registrationForm.adresse) }}
                    </div>
                    <div class="form-group col-6">
                      <label>Télephone</label>
                      {{ form_widget(registrationForm.phone) }}
                      {{ form_errors(registrationForm.phone) }}
                    </div>
                    <div class="form-group col-12">
                      <label>Image</label>
                      {{ form_widget(registrationForm.image) }}
                      {{ form_errors(registrationForm.image) }}
                    </div>
                    <div class="form-group col-12">
                        <label class="" for="agree">J’accepte la politique de confidentialité et je valide la création de mon compte</label>
                        {{ form_widget(registrationForm.agreeTerms) }}
                    </div>
                  </div>


                  <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                      Register
                    </button>
                  </div>
                  {{ form_rest(registrationForm) }} 
                </form>
              {{ form_end(registrationForm) }}
              </div>
            </div>
            <div class="simple-footer">
              
            </div>
          </div>
        </div>
      </div>
{% endblock %}