@model foundation_system.Models.ViewModels.LoginViewModel
@inject foundation_system.Services.IConfiguracionService ConfigService
@{
    ViewData["Title"] = "Iniciar Sesión";
    Layout = null;
    var logoUrl = await ConfigService.GetValorOrDefaultAsync("LOGO_FUNDATION", "/img/logo-placeholder.png");
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>@ViewData["Title"] - MIES</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="~/css/auth.css" asp-append-version="true"/>
</head>
<body>
    <div class="auth-container">
        <div class="auth-background">
            <div class="auth-gradient"></div>
            <div class="auth-pattern"></div>
        </div>
        
        <div class="auth-card animate-fade-in">
            <div class="auth-header">
                <div class="auth-logo">
                    <img src="@logoUrl" alt="Logo" class="img-fluid mb-3" style="max-height: 80px; width: auto; object-fit: contain;" />
                </div>
                <h1 class="auth-title">MIES</h1>
                <p class="auth-subtitle">Misión Esperanza</p>
            </div>
            
            @if (TempData["SuccessMessage"] != null)
            {
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    @TempData["SuccessMessage"]
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            }
            
            <form asp-action="Login" method="post" class="auth-form">
                <div asp-validation-summary="ModelOnly" class="alert alert-danger mb-3"></div>
                
                <div class="form-floating mb-3">
                    <input asp-for="NombreUsuario" class="form-control" id="username" placeholder="Usuario" autofocus autocomplete="username"/>
                    <label for="username">
                        <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                        Usuario
                    </label>
                    <span asp-validation-for="NombreUsuario" class="text-danger small"></span>
                </div>
                
                <div class="form-floating mb-3">
                    <input asp-for="Contrasena" class="form-control" id="password" placeholder="Contraseña" autocomplete="current-password"/>
                    <label for="password">
                        <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                        </svg>
                        Contraseña
                    </label>
                    <span asp-validation-for="Contrasena" class="text-danger small"></span>
                </div>
                
                <div class="form-check mb-4">
                    <input asp-for="RecordarMe" class="form-check-input" id="rememberMe"/>
                    <label class="form-check-label" for="rememberMe">
                        Recordarme
                    </label>
                </div>
                
                <button type="submit" class="btn btn-primary btn-auth">
                    <span>Iniciar Sesión</span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </button>
            </form>
            
            <div class="auth-footer">
                <p>¿No tienes una cuenta?</p>
                <a asp-action="Register" class="auth-link">Crear cuenta</a>
            </div>
            
            <div class="auth-branding">
                <span>Sistema de Gestión</span>
                <span class="separator">•</span>
                <span>Fundación MIES</span>
            </div>
        </div>
    </div>
    
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
