<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>{{ _('Iniciar sesión') }} - Coati Payroll</title>

        <link
            rel="icon"
            type="image/x-icon"
            href="{{ url_for('static', filename='logo/Icono.svg') }}"
        />
        

        <!-- Google Fonts - Enterprise Typography -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap"
            rel="stylesheet"
        />

        <!-- Bootstrap (mismo CDN que base) -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />

        <!-- Bootstrap Icons -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
        />

        <!-- App styles -->
        <link
            rel="stylesheet"
            href="{{ url_for('static', filename='styles.css') }}"
        />
    </head>

    <body class="login-page">
        <div class="login-container">
            <!-- Left side - Branding -->
            <div class="login-branding">
                <div class="branding-content">
                    <div class="logo-container">
                        <img
                            src="{{ url_for('static', filename='logo/Icono.png') }}"
                            alt="Coati Payroll Logo"
                            height="150"
                            width="150"
                        />
                    </div>
                    <div>
                        <h1 class="brand-name">Coati <span>Payroll</span></h1>
                        <p class="brand-tagline">
                            {{ _('Sistema de gestión de nóminas') }}<br />
                            {{ _('Agiliza y simplifica el pago de sueldos en su
                            compañía.') }}
                        </p>
                    </div>
                    <div class="brand-features">
                        <div class="feature-item">
                            <i class="bi bi-building-fill-add"></i>
                            <span>{{ _('Multiempresa') }}</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-currency-exchange"></i>
                            <span>{{ _('Multimoneda') }}</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-shield-check"></i>
                            <span>{{ _('Seguro y confiable') }}</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-speedometer2"></i>
                            <span>{{ _('Rápido y eficiente') }}</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-gear-fill"></i>
                            <span>{{ _('Configurable') }}</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-shuffle"></i>
                            <span>{{ _('Flexible') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right side - Login Form -->
            <div class="login-form-container">
                <div class="login-form-wrapper">
                    <div class="login-header">
                        <h2 id="loginTitle">{{ _('Iniciar sesión') }}</h2>
                        <p class="login-subtitle">
                            {{ _('Introduce tus credenciales para acceder a tu
                            cuenta.') }}
                        </p>
                    </div>

                    {%- set flashed = get_flashed_messages(with_categories=true)
                    -%} {% if flashed %}
                    <div
                        id="errorMsg"
                        class="alert alert-warning"
                        role="alert"
                        aria-live="polite"
                    >
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {{ flashed[0][1] }}
                    </div>
                    {% endif %}

                    <form
                        id="loginForm"
                        method="post"
                        action="{{ url_for('auth.login') }}"
                    >
                        {{ form.hidden_tag() }}

                        <div class="mb-4">
                            <label for="{{ form.email.id }}" class="form-label">
                                <i class="bi bi-person me-1"></i>
                                {{ _('Usuario o correo electrónico') }}
                            </label>
                            {{ form.email(id='email', class_='form-control
                            form-control-lg', autocomplete='username',
                            placeholder=_('usuario o correo')) }} {% if
                            form.email.errors %}
                            <div class="form-text text-danger">
                                {{ form.email.errors[0] }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {{ _('Usa el correo o el nombre de usuario
                                asociado a tu cuenta.') }}
                            </div>
                            {% endif %}
                        </div>

                        <div class="mb-4">
                            <label
                                for="{{ form.password.id }}"
                                class="form-label"
                            >
                                <i class="bi bi-lock me-1"></i>
                                {{ _('Contraseña') }}
                            </label>
                            <div class="input-group">
                                {{ form.password(id='password',
                                class_='form-control form-control-lg',
                                autocomplete='current-password',
                                placeholder='••••••••') }}
                                <button
                                    type="button"
                                    id="togglePwd"
                                    class="btn btn-outline-secondary"
                                    aria-label="{{ _('Mostrar u ocultar contraseña') }}"
                                    aria-pressed="false"
                                >
                                    <i
                                        class="bi bi-eye"
                                        id="toggleIcon"
                                        aria-hidden="true"
                                    ></i>
                                </button>
                            </div>
                            {% if form.password.errors %}
                            <div class="form-text text-danger">
                                {{ form.password.errors[0] }}
                            </div>
                            {% endif %}
                        </div>

                        <div class="d-grid mb-3">
                            {{ form.submit(class_='btn btn-primary btn-lg') }}
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script>
            // Textos de JS marcados para que Flask-Babel pueda extraerlos
            const TXT_SHOW = "{{ _('Mostrar') }}";
            const TXT_HIDE = "{{ _('Ocultar') }}";
            const ERR_EMAIL = "{{ _('Por favor introduce tu correo.') }}";
            const ERR_PASS =
                "{{ _('La contraseña debe tener al menos 6 caracteres.') }}";
            const ERR_CONN = "{{ _('No se pudo conectar al servidor.') }}";
            const ERR_LOGIN = "{{ _('Error al iniciar sesión') }}";

            (function () {
                const pwd = document.getElementById("password");
                const toggle = document.getElementById("togglePwd");
                const toggleIcon = document.getElementById("toggleIcon");
                const form = document.getElementById("loginForm");
                const errorMsg = document.getElementById("errorMsg");

                toggle.addEventListener("click", () => {
                    if (pwd.type === "password") {
                        pwd.type = "text";
                        toggleIcon.classList.remove("bi-eye");
                        toggleIcon.classList.add("bi-eye-slash");
                        toggle.setAttribute("aria-pressed", "true");
                    } else {
                        pwd.type = "password";
                        toggleIcon.classList.remove("bi-eye-slash");
                        toggleIcon.classList.add("bi-eye");
                        toggle.setAttribute("aria-pressed", "false");
                    }
                });

                form.addEventListener("submit", (e) => {
                    if (errorMsg) {
                        errorMsg.style.display = "none";
                        errorMsg.textContent = "";
                    }

                    const email = document.getElementById("email").value.trim();
                    const password = pwd.value;

                    if (!email) {
                        e.preventDefault();
                        showError(ERR_EMAIL);
                        return;
                    }
                    if (password.length < 6) {
                        e.preventDefault();
                        showError(ERR_PASS);
                        return;
                    }
                });

                function showError(text) {
                    if (errorMsg) {
                        errorMsg.innerHTML =
                            '<i class="bi bi-exclamation-triangle me-2"></i>' +
                            text;
                        errorMsg.style.display = "block";
                    }
                }

                document.getElementById("email").focus();
            })();
        </script>
    </body>
</html>
