<!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>

    <!-- 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">
                    <span class="logo-placeholder logo-large"><i class="bi bi-flower1"></i></span>
                </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>
