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

{% block javascripts %}
    <script>
        window.addEventListener('load', () => {
        messageFlashHide()

        function messageFlashHide()
        {
            const messageFlash = document.querySelector('.alert')
    
            if (messageFlash)
            {
            console.log('Has alert: ',messageFlash)
    
            setTimeout(()=> {
                messageFlash.style.transition = "opacity 3s ease-out"
                messageFlash.style.opacity = "0"
    
                setTimeout(() =>  {
                    messageFlash.remove()
                }, 3000)
            }, 3000)
            }
            else
            {
            console.log('No alert')
            }
        }  
        })
    </script>
{% endblock javascripts %}

{% block body %}
    
    {% if error %}
    <div class="container">
        <div class="alert alert-danger" style="background-color: lightcoral">Mot de passe / compte invalide{#{{ error.messageKey|trans(error.messageData, 'security') }}#}</div>
    </div>
    {% endif %}

    {% if app.user %}
    <div class="mb-3">
    Vous êtes connecté à {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
    </div>
    {% endif %}
    
    <form id="login_form" action="{{ path('app_login') }}" data-link="{{path('app_login')}}" method="post" class="form-group flex-wrap container">
        
        {% if app.user %}
        <div class="mb-3">
        Vous êtes connecté à {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
        </div>
        {% endif %}                                    
        <div class="form-input col-lg-12 my-4">
        
        <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control mb-3 p-4" placeholder="Email" autocomplete="email" required autofocus>
        <input type="password" name="_password" id="password" class="form-control mb-3 p-4" placeholder="Mot de passe" autocomplete="current-password" aria-describedby="passwordHelpBlock" required>
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">                                        
        
        <label class="py-3 d-flex flex-wrap justify-content-between">
        <div>
        <input type="checkbox" name="_remember_me" class="d-inline">
        <span class="label-body ">Se rappeler de moi</span>
        </div>
        
        <div id="passwordHelpBlock" class="form-text ">
        <a href="#" class="text-primary  fw-bold"> Forgot Password?</a>
        </div>
        </label>
        
        <div class="d-grid my-3">
        <button type="submit" href="#" class="btn btn-dark btn-lg rounded-1">Se connecter</button>
        </div>                                     
        
        </div>
        
        
                                            
    </form>
{% endblock body %}