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

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

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
{% for type, messages in app.flashes %}
    {% for message in messages %}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    icon: '{{ type == "success" ? "success" : "error" }}',
                    title: 'Notification',
                    text: '{{ message|e('js') }}',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    {% endfor %}
{% endfor %}

 <form class="theme-form" id="formAuthentication" action="" method="POST">
                  <h6>Entrez vos données pour créer un compte</h6>
                  <br>
                  <div class="form-group">
                    <label class="col-form-label pt-0" >Votre nom</label>
                    <div class="row g-2">
                      <div class="col-6">
                        <input class="form-control" type="text" name="nom" required="" placeholder="Nom">
                      </div>
                      <div class="col-6">
                        <input class="form-control" type="text" name="prenom" required="" placeholder="Prénoms">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Adresse Email</label>
                    <input class="form-control" type="email" name="email" required="" placeholder="Test@gmail.com">
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Société</label>
                    <input class="form-control" type="text" name="societe" required="" placeholder="Cloud & Racks">
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Quelle poste occupez-vous?</label>
                    <input class="form-control" type="text" name="poste"required="" placeholder="Directeur Technique, Technicien">
                  </div>
                  <div class="form-group">
                    <label class="col-form-label">Password</label>
                    <div class="form-input position-relative">
                     <input class="form-control" type="password" name="password" id="inputPassword" required="" placeholder="*********" autocomplete="current-password">
                     <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 mb-0">
                    {#<div class="checkbox p-0">#}
                    {#  <input id="checkbox1" type="checkbox">#}
                    {#  <label class="text-muted" for="checkbox1">Agree with<a class="ms-2" href="#">Privacy Policy</a></label>#}
                    {#</div>#}
                    <button class="btn btn-primary btn-block w-100" type="submit">Créer compte</button>
                  </div>
                  <p class="mt-4 mb-0 text-center">Avez-vous déja un compte?<a class="ms-2" href="{{ path ('app_login')}}">Connectez-vous</a></p>
                </form>
<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 %}