<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AstraOS — Maintenance 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, #2c2315, #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(243, 156, 18, 0.7)"></div>
        <svg class="relative z-10" viewBox="0 0 24 24" fill="none" stroke="#f39c12" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
        </svg>
    </div>
    <p class="mt-4 text-xl tracking-wide opacity-80">AstraOS Maintenance</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-yellow-500/20 rounded-2xl p-8 backdrop-blur-lg shadow-xl opacity-0">
        <div class="flex justify-center items-center gap-4 mb-6">
            <svg class="w-8 h-8 text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
            </svg>
            <h1 id="loginTitle" class="text-3xl font-bold text-center tracking-wider text-yellow-300"></h1>
        </div>
        {% 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 'yellow' }}-500/20 p-4 text-sm text-{{ 'red' if category == 'danger' else 'yellow' }}-300 border border-{{ 'red' if category == 'danger' else 'yellow' }}-500/30">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        <form id="loginForm" action="{{ url_for('maintenance_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-yellow-500">
            </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-yellow-500 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-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-lg
                           font-semibold transition">
                Bypass Login
            </button>
        </form>
    </div>
</div>
<script>
    gsap.to("#star", {
        rotation: 360,
        duration: 8,
        ease: "none",
        repeat: -1
    });
    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: "Maintenance 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 = "Maintenance Login";
    {% endif %}
</script>

</body>
</html>
