{% extends 'login/base-login.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">
{% endblock %}

{% block body %}
    <section class="sec-principal">

        <div class="container">  
        
            <div class="row justify-content-center">

                <div class="col-md-6 col-lg-4">

                    <div class="container-login border rounded my-5 bg-white shadow">

                        <div class="py-5">
                            
                            <div class="mt-3">
                                <h3 class="fw-bold pt-2 text-center">Inicio Sesión</h3>
                                <h5 class="pt-2 text-center">Acceda a su panel de administracion</h5>
                            </div>

                            <div class="p-2">
                                <form method="post" class="pt-5 px-4">
                                    {% if error %}
                                        <div class="alert alert-danger">{{ error.messageKey }}</div>
                                    {% endif %}

                                    <div class="mb-4">
                                        <label for="InputUser" class="form-label fw-bold">Usuario <i class="fa-solid fa-user"></i></label>
                                        <input type="text" name="user" class="form-control form-control-lg" id="InputUser" placeholder="ej. email@email.com" aria-describedby="userLogin">
                                    </div>

                                    <div class="mb-3">
                                        <label for="InputPassword" class="form-label fw-bold">Password <i class="fa-solid fa-key"></i></i></label>
                                        <input type="password" name="password" class="form-control form-control-lg" id="InputPassword" >
                                    </div> 

                                    <div class="form-check">
                                        <input type="checkbox" name="_remember_me" class="form-check-input" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault" >Recuerdame</label>
                                    </div>

                                    <div class="d-grid gap-2 pt-3">
                                        <button type="submit" class="btn btn-warning btn-lg" id="btn-login">Iniciar Sesión</button> 
                                    </div>

                                </form>
                            </div>
                        </div>

                    </div>
                
                </div>
                
            </div>
            
        </div>
    </section>

{% endblock %}