<div th:fragment="_login">
    <div class="p-lg-5 p-4">
        <div>
            <h5 class="text-primary" th:text="#{login.welcome}">¡Bienvenido!</h5>
            <p class="text-muted" th:text="#{login.subtitle}">Inicie sesión para continuar:</p>
        </div>

        <div class="mt-4">
            <form th:action="@{/login}" method="post">
                <!-- CSRF obligatorio -->
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />

                <div th:if="${param.error}" class="alert alert-danger"
                    th:text="#{login.error}">
                    Credenciales inválidas
                </div>

                <div class="mb-3">
                    <label for="username" class="form-label" th:text="#{login.email}">Correo electrónico</label>
                    <input type="email" class="form-control" id="username" th:placeholder="#{login.email-placeholder}"
                        name="username">
                </div>

                <div class="mb-3">
                    <div class="float-end">
                        <a href="/auth-pass-reset-cover" class="text-muted" th:text="#{login.forgotPassword}">¿Olvidó su
                            contraseña?</a>
                    </div>
                    <label class="form-label" for="password-input" th:text="#{login.password}">Contraseña</label>
                    <div class="position-relative auth-pass-inputgroup mb-3">
                        <input type="password" class="form-control pe-5 password-input"
                            th:placeholder="#{login.password-placeholder}" id="password-input" name="password">
                        <button
                            class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon"
                            type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>
                    </div>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="remember-me" name="remember-me">
                    <label class="form-check-label" for="remember-me" th:text="#{login.rememberMe}">Recuerdame</label>
                </div>

                <div class="mt-4">
                    <button class="btn btn-secondary w-100" type="submit" th:text="#{login.login}">Iniciar
                        Sesión</button>
                </div>


            </form>
        </div>

        <div class="mt-5 text-center">
            <p class="mb-0">
                <span th:text="#{login.new-account}">¿No tienes una cuenta?</span>
                <a th:href="@{/auth-signup-cover}" class="fw-semibold text-primary text-decoration-underline"
                    th:text="#{login.sign-up}">
                    Regístrate
                </a>
            </p>
        </div>
    </div>
</div>