{% extends 'security/baselogin.html.twig' %}

{% block title %}Connectez-vous{% endblock %}

{% block body %}
<form class="theme-form" method="post">
    {% if error %}
        <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
    {% endif %}

    {% if app.user %}
        <div class="mb-3">
            Vous êtes connecté(e) comme {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
        </div>
    {% endif %}
    
    <h4 class="h4 mb-3 font-weight-normal">Connectez-vous au compte</h4>
    <p>Entrez vos identifiants pour vous connecter</p>
    
    <label for="inputEmail">Email</label>
    <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" placeholder="@gmail.com" autocomplete="email" required autofocus>
    
    {#<label for="inputPassword">Mot de passe</label>#}
    {#<input type="password" name="password" id="inputPassword" class="form-control" placeholder="*********" autocomplete="current-password" required>#}
    
    <div class="form-group">
    <label class="col-form-label">Mot de passe</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">Se souvenir</label>
        </div>
        
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        <button class="btn btn-primary btn-block w-100" type="submit">Se connecter</button>
    </div>
    <p class="mt-4 mb-0 text-center">Vous n'avez pas de compte?<a class="ms-2" href="{{path ('app_inscription')}}">Créez un compte</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 %}