<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"
    data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none"
    data-preloader="disable">

<head>
    <!--page title-->
    <div th:replace="~{printhub/partials/title-meta :: title-meta('Sign In')}"></div>

    <!-- Page CSS -->
    <div th:replace="~{printhub/partials/head-css :: head-css}"></div>

    <style>
        .auth-page-content {
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }

        .auth-page-content.lang-loaded {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
        <div class="bg-overlay"></div>
        <!-- auth-page content -->
        <div class="auth-page-content overflow-hidden pt-lg-5 lang-loading">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mx-auto">
                        <div class="card overflow-hidden">
                            <div class="row g-0">
                                <div class="p-lg-5 p-4">
                                    <div class="text-end mb-3">
                                        <button class="btn btn-sm me-2" onclick="setLang('es')">
                                            <img src="/assets/images/flags/es.svg" alt="ES" height="16">
                                        </button>
                                        <button class="btn btn-sm" onclick="setLang('en')">
                                            <img src="/assets/images/flags/gb.svg" alt="EN" height="16">
                                        </button>
                                    </div>
                                    <div>
                                        <h5 class="text-primary" data-key="t-login-title">Welcome Back !</h5>
                                        <p class="text-muted" data-key="t-login-subtitle">Sign in to continue to
                                            Velzon.
                                        </p>
                                    </div>

                                    <div class="mt-4">
                                        <div th:if="${param.error}" class="alert alert-danger text-center"
                                            data-key="t-login-error">
                                            Usuario o contraseña incorrectos.
                                        </div>
                                        <div th:if="${param.logout}" class="alert alert-success text-center"
                                            data-key="t-login-logout">
                                            Has cerrado sesión correctamente.
                                        </div>
                                        <form method="post" th:action="@{/login}">
                                            <div class="mb-3">
                                                <label for="username" class="form-label"
                                                    data-key="t-login-username">Username</label>
                                                <input type="text" name="username" class="form-control" id="username"
                                                    placeholder="Enter username" required>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="password-input"
                                                    data-key="t-login-password">Password</label>
                                                <input type="password" name="password" class="form-control"
                                                    id="password-input" placeholder="Enter password" required>
                                            </div>

                                            <div class="mt-4">
                                                <button class="btn btn-secondary w-100" type="submit"
                                                    data-key="t-login-button">Sign
                                                    In</button>
                                            </div>
                                        </form>
                                    </div>

                                    <div class="mt-5 text-center">
                                        <p class="mb-0">
                                            <span data-key="t-login-signup-message">Don't have an account ?</span>
                                            <a href="/signup" class="link">
                                                <i class="fa fa-user-plus me-1"></i>
                                                <span data-key="t-login-signup-signup" class="label">Signup</span>
                                            </a>
                                        </p>
                                    </div>

                                </div>
                            </div> <!-- end row -->
                        </div> <!-- end card -->
                    </div> <!-- end col -->

                </div> <!-- end row -->
            </div> <!-- end container -->
        </div> <!-- end auth page content -->

        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <p class="mb-0">&copy;
                                <script>document.write(new Date().getFullYear())</script> PrintHub <i
                                    class="mdi mdi-heart text-danger"></i> by JJO & IMN
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->
    </div>

    <div th:replace="~{theme/partials/vendor-scripts :: scripts}"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <!-- password-addon init -->
    <script src="/assets/js/pages/password-addon.init.js"></script>
    <script>
        function setLang(lang) {
            localStorage.setItem("lang", lang);
            applyTranslations(lang);
        }

        function applyTranslations(lang) {
            const container = document.querySelector('.auth-page-content');

            // Asegura que está invisible al inicio
            container?.classList.remove('lang-loaded');

            fetch('/api/lang?lang=' + lang,{
                cache: "no-store"
            })
                .then(res => res.json())
                .then(data => {
                    document.querySelectorAll('[data-key]').forEach(el => {
                        const key = el.getAttribute('data-key');
                        if (data[key]) {
                            if (el.children.length === 0) {
                                el.textContent = data[key];
                            }
                        }
                    });
                })
                .finally(() => {
                    // Aquí aplica el fade cuando ya están las traducciones
                    requestAnimationFrame(() => {
                        container?.classList.add('lang-loaded');
                    });
                });
        }

        document.addEventListener('DOMContentLoaded', () => {
            const lang = localStorage.getItem("lang") || "es";
            applyTranslations(lang);
        });

    </script>


</body>

</html>