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

{% block title %}Login{% endblock %}

{% block stylesheets %}
<style>
    div.login-flex{
        display: flex;
        justify-content: center;
        height: max-content;
        margin: 3em;
    }
    div.card{
        margin-top: -25%;
        margin-bottom: 60px;
    }
    .password-ctn{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .see-password{
        padding: .375rem .75rem;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;        /* margin: -25px 0 0 -25px */
    }
</style>
{% endblock %}

{% block body %}
<div class="login-flex">
    <div class="col-md-4">
        <div class="card bg-light">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fas fa-lock"></i>
                    Connexion à l'administration
                </h4>
            </div>
            <div class="card-body">
                {% if hasError %}
                    <div class="alert alert-warning">
                        <p>Les informations que vous avez fournie sont incorectes...</p>
                    </div>
                {% endif %}
                <form action="" method="post">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="text" class="form-control" name="email" id="inputEmail" placeholder="Votre email..." value="">
                    </div>
                    <div class="form-group my-3">
                        <label for="password">Mot de passe</label>
                       <div class="password-ctn">
                            <input type="password" class="form-control" name="password" id="inputPassword" placeholder="Votre mot de passe...">
                            <span class="see-password"><i class="far fa-eye"></i></span>
                       </div>
                    </div>

                    <input type="hidden" name="_csrf_token"
                        value="{{ csrf_token('authenticate') }}"
                    >

                    <div class="checkbox mb-3">
                        <label>
                            <input type="checkbox" name="_remember_me"> Remember me
                        </label>
                    </div>

                    <div class="form-group d-flex justify-content-between">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-lock-open"></i>
                            Connexion !    
                        </button>
                        <a href="{{ path('home') }}" class="btn btn-link">
                            <i class="fas fa-arrow-circle-left"></i>
                                Retour vers le site
                        </a>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <a href="{{path('reset_password')}}">Mot de passe oublié ?</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script src="/particles/particles.min.js"></script>
    <script>
        var inputPassword = document.querySelector('#inputPassword');
        var btnShow = document.querySelector('.see-password');

        btnShow.addEventListener('click', function() {
            if (inputPassword.type == "password") {
                inputPassword.type = "text";
                btnShow.querySelector('i').classList.remove('fa-eye');
                btnShow.querySelector('i').classList.add('fa-eye-slash');
            }else if (inputPassword.type == "text") {
                inputPassword.type = "password";
                btnShow.querySelector('i').classList.remove('fa-eye-slash');
                btnShow.querySelector('i').classList.add('fa-eye');
            }
        })
    </script>
{% endblock %}