{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acceso al Sistema - Ejército Bolivariano</title>
    <link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
   
    <!-- Font Awesome 6.x (última versión estable) -->
    <link rel="stylesheet" href="/static/assets/fonts/iconos/css/all.min.css">

    <style>
        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            z-index: 9999;
            display: none;
        }
        .spinner {
            animation: rotate 2s linear infinite;
            width: 50px;
            height: 50px;
        }
        @keyframes rotate {
            100% { transform: rotate(360deg); }
        }
        .login-card {
            transition: transform 0.3s ease;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .login-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body class="bg-gradient-primary d-flex justify-content-center align-items-center vh-100" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
    
    <!-- Preloader -->
<!--     <div class="preloader d-flex justify-content-center align-items-center">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Cargando...</span>
        </div>
    </div>
 -->



    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <!-- Tarjeta de Login -->
                <div class="login-card card p-4">
                    <div class="card-body">
                        <!-- Encabezado -->
                        <div class="text-center mb-4">
                            <img src="{% static 'img/transporte.png' %}" alt="Escudo Militar" class="mb-3" width="120">
                            <h2 class="fw-bold text-uppercase mb-1" style="color: #1e3c72;">Servicio de Transporte</h2>
                            <h4 class="text-muted">Ejército Bolivariano</h4>
                        </div>

                        <!-- Mensajes -->
                        {% if messages %}
                        <div class="alert-container">
                            {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <!-- Formulario -->

                        <!-- <div class="alert alert-info mt-3">
                            <small>Licencia válida hasta: {{ expiration_date|date:"d/m/Y" }}</small>
                        </div> -->
                        
                        <form method="POST" id="loginForm">
                            {% csrf_token %}
                            <!-- Usuario -->
                            <div class="mb-3">
                                <label class="form-label text-dark">Usuario</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    <input type="text" name="username" class="form-control" placeholder="Nombre de usuario" required>
                                </div>
                            </div>

                            <!-- Contraseña -->
                            <div class="mb-4">
                                <label class="form-label text-dark">Contraseña</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                    <input 
                                        type="password" 
                                        name="password" 
                                        id="password" 
                                        class="form-control" 
                                        placeholder="Contraseña" 
                                        required
                                        autocomplete="current-password"
                                        >
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Botón de acceso -->
                            <button type="submit" class="btn btn-primary w-100 py-2 fw-bold">
                                <span class="submit-text">Acceder al Sistema</span>
                                <div class="spinner-border spinner-border-sm d-none" role="status">
                                    <span class="visually-hidden">Cargando...</span>
                                </div>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="/static/assets/js/bootstrap.bundle.min.js"></script> 
    <script>
        // Mostrar/ocultar contraseña
        document.getElementById('togglePassword').addEventListener('click', function() {
            const password = document.getElementById('password');
            const icon = this.querySelector('i');
            if (password.type === 'password') {
                password.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                password.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        });

        // Manejar el preloader
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            const btn = this.querySelector('button[type="submit"]');
            const preloader = document.querySelector('.preloader');
            
            btn.disabled = true;
            btn.querySelector('.submit-text').classList.add('d-none');
            btn.querySelector('.spinner-border').classList.remove('d-none');
            preloader.style.display = 'flex';
        });

        // Animación de entrada
        window.addEventListener('load', () => {
            document.querySelector('.login-card').style.opacity = '1';
            document.querySelector('.login-card').style.transform = 'translateY(0)';
        });
    </script>
</body>
</html>