{% extends 'menuback.html.twig' %}
{% block stylesheets %}
{{parent()}}

<link rel="stylesheet" href="{{ asset('back/bundles/datatables/datatables.min.css') }}">
<link rel="stylesheet"
  href="{{ asset('back/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css') }}">
<style>
  .reverse-geo-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
</style>
{% endblock %}

{% block body %}
<!-- Main Content -->
<div class="main-content">

  <section class="section">

    <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="card card-primary">
          <div class="card-header">
            <h4>Creation compte utilisateur</h4>
          </div>
          <div class="card-body">
            {{ form_start(form) }}

            <div class="row">
              <div class="form-group col-6">
                <label for="frist_name">Nom</label>
                {{ form_widget(form.nom, {'attr': {'class': 'form-control','placeholder':''}}) }}
                {# <input id="frist_name" type="text" class="form-control" name="frist_name" autofocus> #}
              </div>
              <div class="form-group col-6">
                <label for="last_name">Prenoms</label>
                {{ form_widget(form.prenoms, {'attr': {'class': 'form-control','placeholder':''}}) }}
              </div>
            </div>
            <div class="form-group">
              <label for="username">Username</label>
              {{ form_widget(form.username, {'attr': {'class': 'form-control','placeholder':''}}) }}

              {# <input id="email" type="email" class="form-control" name="email"> #}
              <div class="invalid-feedback">
                {{ form_errors(form.username) }}
              </div>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              {{ form_widget(form.email, {'attr': {'class': 'form-control','placeholder':''}}) }}

              {# <input id="email" type="email" class="form-control" name="email"> #}
              <div class="invalid-feedback">
              </div>
            </div>
            <div class="row">
              <div class="form-group col-6">
                <label for="password" class="d-block">Password</label>
                {# <input id="password" type="password" class="form-control pwstrength" data-indicator="pwindicator"
                        name="password"> #}
                {{ form_widget(form.plainPassword.first, {'attr': {'class': 'form-control','placeholder':''}}) }}
                <div class="invalid-feedback">
                  {{ form_errors(form.plainPassword.first) }}
                </div>

                {# <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_row(form.plainPassword.second) }}              #}
                {{ form_widget(form.plainPassword.second, {'attr': {'class': 'form-control','placeholder':''}}) }}
                <div class="invalid-feedback">
                  {{ form_errors(form.plainPassword.second) }}
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="custom-control ">
                {{ form_widget(form.roles, {'attr': {'class': 'form-control','placeholder':''}}) }}
                {{ form_errors(form.roles) }}
                {# {{ form_label(form.termsAccepted, {'attr': {'class': 'custom-control-label'}}) }} 
                     {{ form_row(form.termsAccepted, {'attr': {'class': 'custom-control-input'}}) }} #}
                {# <input type="checkbox" name="agree" class="custom-control-input" id="agree">
                      <label class="custom-control-label" for="agree">I agree with the terms and conditions</label> #}
              </div>
            </div>
            <div class="form-group">
              <div class="custom-control ">
                {{ form_widget(form.enfonction, {'attr': {'class': 'form-control','placeholder':''}}) }}
                {{ form_errors(form.enfonction) }}
                {# {{ form_label(form.termsAccepted, {'attr': {'class': 'custom-control-label'}}) }} 
                     {{ form_row(form.termsAccepted, {'attr': {'class': 'custom-control-input'}}) }} #}
                {# <input type="checkbox" name="agree" class="custom-control-input" id="agree">
                      <label class="custom-control-label" for="agree">I agree with the terms and conditions</label> #}
              </div>
            </div>

            <div class="form-group">
              <div class="custom-control ">
                {{ form_widget(form.module, {'attr': {'class': 'form-control','placeholder':''}}) }}
                {{ form_errors(form.module) }}
                {# {{ form_label(form.termsAccepted, {'attr': {'class': 'custom-control-label'}}) }} 
                     {{ form_row(form.termsAccepted, {'attr': {'class': 'custom-control-input'}}) }} #}
                {# <input type="checkbox" name="agree" class="custom-control-input" id="agree">
                      <label class="custom-control-label" for="agree">I agree with the terms and conditions</label> #}
              </div>
            </div>

            <div class="form-group">
              <div class="custom-control ">
                {{ form_widget(form.uotreich, {'attr': {'class': 'form-control','placeholder':''}}) }}
                {{ form_errors(form.uotreich) }}

                cochez si utilisateur est configurer a treich
                {# {{ form_label(form.termsAccepted, {'attr': {'class': 'custom-control-label'}}) }} 
                     {{ form_row(form.termsAccepted, {'attr': {'class': 'custom-control-input'}}) }} #}
                {# <input type="checkbox" name="agree" class="custom-control-input" id="agree">
                      <label class="custom-control-label" for="agree">I agree with the terms and conditions</label> #}
              </div>
            </div>




            <div class="form-group">
              <button type="submit" class="btn btn-primary btn-lg btn-block">
                Creation compte utilisateur
              </button>
            </div>
            {{ form_end(form) }}
          </div>
          {# <div class="mb-4 text-muted text-center">
                Already Registered? <a href="auth-login.html">Login</a>
              </div> #}
        </div>
      </div>
    </div>

  </section>
</div>

{% endblock %}
{% block javascripts %}
{{parent()}}


{% endblock %}