<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AstraOS — Login</title>
    <link rel="icon" href="{{ url_for('static', filename='media/AstraOS_Logo.ico') }}" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js"></script>
    <style>
        body {
            background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
        }
    </style>
</head>
<body class="text-white">
<div id="startup" class="fixed inset-0 bg-black flex flex-col items-center justify-center z-50">
    <div id="star" class="w-16 h-16 relative">
        <div class="absolute inset-0 rounded-full blur-2xl opacity-70"
             style="background: rgba(192, 132, 252, 0.7)"></div>
        <svg class="relative z-10" viewBox="0 0 100 100">
            <path
                d="M50 5
                   L63 40
                   L95 50
                   L63 60
                   L50 95
                   L37 60
                   L5 50
                   L37 40
                   Z"
                fill="#c084fc"
            />
            <path
                d="M50 28
                   L58 45
                   L76 50
                   L58 55
                   L50 72
                   L42 55
                   L24 50
                   L42 45
                   Z"
                fill="#ffffff"
                opacity="0.9"
            />
        </svg>
    </div>
    <p class="mt-4 text-xl tracking-wide opacity-80">AstraOS</p>
</div>
<div id="loginContent" class="min-h-screen flex items-center justify-center px-4">
    <div id="loginBox" class="w-full max-w-md bg-black/40 border border-purple-500/20 rounded-2xl p-8 backdrop-blur-lg shadow-xl opacity-0">
        <h1 id="loginTitle" class="text-3xl font-bold text-center mb-6 tracking-wider text-purple-300">
        </h1>
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="mb-4 rounded-md bg-{{ 'red' if category == 'danger' else 'blue' }}-500/20 p-4 text-sm text-{{ 'red' if category == 'danger' else 'blue' }}-300 border border-{{ 'red' if category == 'danger' else 'blue' }}-500/30">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        <form id="loginForm" action="/login" method="POST" class="flex flex-col gap-5 opacity-0">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <label class="text-gray-300 text-sm">Username</label>
                <input type="text" name="username" required placeholder="Username"
                       class="mt-1 w-full px-4 py-2 rounded-lg bg-gray-800/60 text-white
                       focus:outline-none focus:ring-2 focus:ring-purple-600">
            </div>
            <div x-data="{ showPassword: false }">
                <label class="text-gray-300 text-sm">Passwort</label>
                <div class="relative">
                    <input :type="showPassword ? 'text' : 'password'" name="password" required placeholder="Passwort"
                           class="mt-1 w-full px-4 py-2 rounded-lg bg-gray-800/60 text-white
                           focus:outline-none focus:ring-2 focus:ring-purple-600 pr-10">
                    <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 top-0 pr-3 flex items-center text-gray-400 hover:text-gray-200">
                        <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.432 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" style="display: none;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.243 4.243l-4.243-4.243" />
                        </svg>
                    </button>
                </div>
            </div>
            <button type="submit"
                    class="mt-2 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg
                           font-semibold transition">
                Login
            </button>
            <div class="flex items-center my-1">
                <div class="flex-grow border-t border-gray-600"></div>
                <span class="flex-shrink mx-4 text-gray-400 text-sm">oder</span>
                <div class="flex-grow border-t border-gray-600"></div>
            </div>
            <a href="{{ url_for('login_discord') }}"
               class="flex items-center justify-center bg-[#5865F2] hover:bg-[#4752C4] text-white py-2 rounded-lg font-semibold transition">
                <img src="{{ url_for('static', filename='media/discord_logo.png') }}" alt="Discord Logo" class="h-5 mr-2">
                Mit Discord anmelden
            </a>
        </form>
    </div>
</div>
<script>
    gsap.to("#star", {
        rotation: 360,
        duration: 1.6,
        ease: "power1.inOut",
        repeat: -1
    });
    gsap.to("#star", {
        scale: 1.22,
        duration: 1,
        yoyo: true,
        repeat: -1,
        ease: "power1.inOut"
    });
    gsap.registerPlugin(TextPlugin);
    {% if not get_flashed_messages() %}
    setTimeout(() => {
        gsap.to("#startup", {
            opacity: 0,
            duration: 0.5,
            onComplete: () => {
                document.getElementById("startup").style.display = "none";
                const tl = gsap.timeline();
                tl.fromTo("#loginBox",
                    { opacity: 0, scale: 0.8 },
                    {
                        opacity: 1,
                        scale: 1,
                        duration: 0.5,
                        ease: "power2.out"
                    }
                );
                tl.to("#loginTitle", {
                    duration: 0.8,
                    text: "AstraOS Login",
                    ease: "none"
                }, "-=0.2");
                tl.to("#loginForm", {
                    opacity: 1,
                    duration: 0.4
                }, "-=0.4");
            }
        });
    }, 800);
    {% else %}
    document.getElementById("startup").style.display = "none";
    document.getElementById("loginBox").style.opacity = 1;
    document.getElementById("loginForm").style.opacity = 1;
    document.getElementById("loginTitle").textContent = "AstraOS Login";
    {% endif %}
</script>
</body>
</html>
