{% extends 'registration/baseregister.html.twig' %}

{% block title %}Inscription{% endblock %}

{% block body %}
    {#<section class="container">#}
    {#    <div class="row">#}
    {#        <div class="col">#}
    {#            <form class="theme-form">#}
    {#            {{ form_errors(registrationForm) }}#}
            
    {#            {{ form_start(registrationForm) }}#}
                
    {#            <h4>Créer ton compte</h4>#}
    {#            <p>Entrez vos données pour créer votre compte</p>#}
                
    {#            <div class="row g-2">#}
    {#                <div class="col-6">#}
    {#                {{ form_row(registrationForm.nom) }}#}
    {#                </div>#}
    {#                <div class="col-6">#}
    {#                {{ form_row(registrationForm.prenom) }}#}
    {#                </div>#}
    {#            </div>#}
    {#                {{ form_row(registrationForm.poste) }}#}
    {#                {{ form_row(registrationForm.email) }}#}
    {#            <div class="form-input position-relative">#}
    {#                {{ form_row(registrationForm.plainPassword, {#}
    {#                    label: 'Password'#}
    {#                }) }}#}
    {#            <div class="show-hide"><span class="show"></span></div>#}
    {#            </div>#}
                    {#{{ form_row(registrationForm.agreeTerms) }}#}
            
    {#                <button type="submit" class="btn btn-primary btn-block mt-4 w-100">Créer un compte</button>#}
    {#            {{ form_end(registrationForm) }}#}
    {#            </form>#}
    {#        </div>#}
    {#    </div>#}
    {#</section>#}
    
    <div class=" login-dark">
            <div>
              <div class="login-main"> 
                <form class="theme-form">
                    
                {{ form_errors(registrationForm) }}
            
                {{ form_start(registrationForm) }}
                    
                  <h4>Create your account</h4>
                  <p>Enter your personal details to create account</p>
                  <div class="form-group">
                    
                    <div class="row g-2">
                      <div class="col-6">
                        {{ form_row(registrationForm.nom) }}
                      </div>
                      <div class="col-6">
                        {{ form_row(registrationForm.prenom) }}
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    
                    {{ form_row(registrationForm.poste) }}
                  </div>
                  <div class="form-group">
                    
                    {{ form_row(registrationForm.email) }}
                  </div>
                  <div class="form-group">
                    
                    <div class="form-input position-relative">
                      {{ form_row(registrationForm.plainPassword, { label: 'Password' } ,  {'attr': {'type': 'password', 'id': 'inputPassword'}}) }}
                      <div class="show-hide">
                         <button class="btn btn-primary" type="button" onclick="affichermotdepasse()"> <i id="eyeIcon" class="fa fa-eye"></i> </button>
                        </div>
                      
                    </div>
                  </div>
                  <div class="form-group mt-5">
                    <button class="btn btn-primary btn-block w-100" type="submit">Create Account</button>
                  </div>
                  <h6 class="text-muted mt-4 or">Or signup with</h6>
                  <p class="mt-4 mb-0 text-center">Already have an account?<a class="ms-2" href="login.html">Sign in</a></p>
                </form>
              </div>
            </div>
          </div>
          
          <script>
        var resizefunc = [];
        
        function affichermotdepasse() {
            const passwordInput = document.getElementById('inputPassword');
            const eyeIcon = document.getElementById('eyeIcon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            }
        }
    </script>
   
{% endblock %}