<!--
Archivo: login.html
Ruta: src\templates\Security\login.html
Lenguaje: HTML
-->

<!DOCTYPE html>
<html data-bs-theme="light" lang="es-MX">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Login - Brand</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/Montserrat.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/baguetteBox.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vanilla-zoom.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/Security/login.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
</head>

<body>
    <header class="d-flex justify-content-end p-3">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                {{ _('Idioma') }}
            </button>
            <ul class="dropdown-menu" aria-labelledby="languageDropdown">
                <li><a class="dropdown-item" href="{{ url_for('set_language', lang_code='es') }}">Español</a></li>
                <li><a class="dropdown-item" href="{{ url_for('set_language', lang_code='en') }}">English</a></li>
            </ul>
        </div>
    </header>
    <main class="page">
        <section class="clean-block clean-form dark">
            <div class="container">
                <div class="block-heading text-center">
                    <h2 class="text-info">{{ _('Inicio de sesión') }}</h2>
                    <p>
                        {{ _('Para acceder a este portal, es necesario estar pre-registrado por el personal de Supervisión y Control de Operaciones. Si eres distribuidor, puedes solicitar acceso desde la página de bienvenida, y un directivo se encargará de proporcionarte tus credenciales.') }}
                    </p>
                </div>
                
                <!-- Alerta para mensajes de error -->
                <div id="error-container" class="alert alert-danger d-none" role="alert">
                    <!-- Aquí se mostrarán mensajes de error -->
                </div>
                
                <form id="loginForm">
                    <div class="mb-3">
                        <label class="form-label" for="email">{{ _('Correo') }}</label>
                        <input class="form-control item" type="email" id="email" name="email" aria-label="{{ _('Correo electrónico') }}" placeholder="{{ _('Ingresa tu correo electrónico') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="password">{{ _('Contraseña') }}</label>
                        <div class="input-group">
                            <input class="form-control" type="password" id="password" name="password" aria-label="{{ _('Contraseña') }}" placeholder="{{ _('Ingresa tu contraseña') }}" required>
                            <button class="btn btn-outline-secondary toggle-password" type="button">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="rememberMe" name="rememberMe">
                            <label class="form-check-label" for="rememberMe">{{ _('Recuérdame') }}</label>
                        </div>
                        <!-- Cambia esto: -->
                        <a href="#" class="forgot-password" data-bs-toggle="modal" data-bs-target="#forgotPasswordModal">{{ _('¿Olvidaste tu contraseña?') }}</a>
                    </div>
                    <button class="btn btn-primary w-100 login-btn" type="submit">
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        {{ _('Iniciar sesión') }}
                    </button>
                </form>
                <div class="text-center mt-3 responsive-btns">
                    <p class="mb-2">{{ _('¿No tienes acceso aún? Solicítalo aquí:') }}</p>
                    <a href="{{ url_for('solicitud_de_alta') }}" class="btn btn-secondary">{{ _('Registro para Nuevos Usuarios') }}</a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- Modal de Distribuidores -->
    <div class="modal fade" id="distributorModal" tabindex="-1" aria-labelledby="distributorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="distributorModalLabel">{{ _('Selección de país de distribución') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="mb-4">
                        {{ _('¿Planea realizar la distribución de nuestros productos en México o en otro país? / Do you plan to distribute our products in Mexico or another country?') }}
                    </p>
                    <div class="d-flex flex-column align-items-center gap-2">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal de Recuperación de Contraseña -->
    <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="forgotPasswordModalLabel">Recuperar Contraseña</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="block-heading text-center">
                            <p>Ingresa tu correo electrónico para recibir un enlace de recuperación</p>
                        </div>

                        <div id="recovery-error-container" class="alert alert-danger d-none" role="alert">
                            <!-- Aquí se mostrarán mensajes de error -->
                        </div>
                        
                        <div id="recovery-success-container" class="alert alert-success d-none" role="alert">
                            <!-- Aquí se mostrarán mensajes de éxito -->
                        </div>
                        
                        <form id="forgotPasswordForm">
                            <div class="form-group mb-4">
                                <label for="recovery-email" class="form-label">Correo Electrónico</label>
                                <input type="email" class="form-control" id="recovery-email" name="email" required>
                            </div>
                            
                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary recovery-btn">
                                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                    Enviar Enlace de Recuperación
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/baguetteBox.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vanilla-zoom.js') }}"></script>
    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
    <script src="{{ url_for('static', filename='js/Security/login.js') }}"></script>
</body>

</html>