{% extends 'base.html' %}
{% load static %}
{% block login_home %}
    <section class="min-vh-100 hud-img">
        <div class="d-flex p-5 flex-column">
            <div class="row">
                <div class="col text-center">
                    <img src="{% static 'img/Logo-01-nav.png'%}"  class="mt-3" alt="">
                    <h1 class="dosis-extrabold h1 text-white my-3 display-5 ">VITALAPP</h1>
                    <h1 class="lato fs-5 text-white">El bienestar y la salud </br>está en tus manos</h1>
                </div>
                <div class="col text-center bg-black bg-opacity-75 p-lg-5 rounded-1">
                    <h3 class="dosis-extrabold text-uppercase text-danger h1 mt-3">Iniciar Sesión</h3>
                    <form action="{% url 'login' %}" method="POST" class="text-start align-items-start mt-3 row">
                        {% csrf_token %}
                        {% for message in messages %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-triangle"></i> {{ message }}!
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            {% endif %}
                        {% endfor %}
                        <div class="mb-3">
                            <label class="form-label lato fs-5 text-white" for="InputEmail">Correo Electronico
                                <span class="text-danger dosis-bold">*</span>
                            </label>
                            <input  type="email" name="email" class="form-control form-control-lg" id="InputEmail" placeholder="example@example.com">
                        </div>
                        <div class="mb-3">
                            <label class="form-label lato fs-5 text-white" for="InputPassword">Contraseña
                                <span class="text-danger dosis-bold">*</span>
                            </label>
                            <input type="password" name="password" class="form-control form-control-lg" id="InputPassword" placeholder="************">
                        </div>
                        <div class="mb-3 p-3 ">
                            <input type="checkbox" class="form-check-input border border-2 border-black" id="Checkremenber">
                            <label class="form-check-label text-white" for="Checkremenber">Recuerdame</label>
                        </div>
                        <div class="mb-3">
                            <button type="submit" class="btn btn_red lato form-control btn-lg">Iniciar Sesión</button>
                        </div>
                    </form>
                    <div class="mt-1 text-center">
                        <a class="lato text-white fw-semibold" href="{% url 'registrarse' %}">Registrate</a>
                    </div>
                    <div class="mt-1 mb-3 text-center">
                        <span><a class="lato text-white fw-semibold" href="{% url 'olvide_contraseña' %}">¿Ha olvidado su contraseña?</a></span>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}