<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AstraOS — Account deaktiviert</title>
    <link rel="icon" href="/static/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>
    <style>
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0a0a0f; }
        ::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }

        body {
            background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
            min-height: 100vh;
            color: #e6e6e6;
            overflow-x: hidden;
        }

        .animated-bg {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .dot {
            position: absolute;
            width: 4px; height: 4px;
            border-radius: 50%;
            background: rgba(192, 132, 252, 0.15);
            animation: float 20s infinite linear;
        }
        @keyframes float {
            0% { transform: translateY(100vh) scale(1); }
            100% { transform: translateY(-10vh) scale(1.5); }
        }

        .card-glow {
            box-shadow: 0 0 60px rgba(139, 92, 246, 0.08), 0 0 120px rgba(139, 92, 246, 0.04);
        }

        @keyframes pulseIcon {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        .pulse-icon {
            animation: pulseIcon 3s ease-in-out infinite;
        }

        .toast-container {
            position: fixed;
            top: 1.25rem;
            right: 1.25rem;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            align-items: flex-end;
        }
    </style>
</head>
<body class="text-white font-sans antialiased flex items-center justify-center min-h-screen">

    <div class="animated-bg"></div>

    <!-- Flash messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="toast-container" x-data>
        {% for category, message in messages %}
        <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-x-8"
             x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 p-4 max-w-sm border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else 'blue') }}-500/40">
            <p class="text-sm text-gray-100">{{ message }}</p>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endwith %}

    <div class="relative z-10 w-full max-w-md mx-auto px-4" x-data="{ showForm: false }" id="mainCard">
        <div class="bg-black/50 backdrop-blur-xl rounded-2xl p-10 card-glow border border-purple-500/20 text-center">

            <!-- Icon -->
            <div class="pulse-icon inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-500/10 border border-red-500/30 mb-6 mx-auto">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
            </div>

            <!-- Title -->
            <h1 class="text-3xl font-bold text-white mb-2">Account deaktiviert</h1>
            <p class="text-gray-400 text-sm mb-8 leading-relaxed">
                Dein AstraOS-Account wurde deaktiviert.<br>
                Du hast aktuell keinen Zugang zum Panel.
            </p>

            <!-- Separator -->
            <div class="border-t border-purple-500/20 mb-8"></div>

            <!-- Options -->
            <div class="space-y-3" x-show="!showForm">
                <button @click="showForm = true"
                        class="w-full py-3 px-4 bg-purple-600/80 hover:bg-purple-600 text-white font-semibold rounded-xl transition-all duration-200 flex items-center justify-center gap-2 hover:shadow-lg hover:shadow-purple-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/>
                    </svg>
                    Reaktivierung anfragen
                </button>
                <a href="/login"
                   class="block w-full py-3 px-4 bg-gray-700/60 hover:bg-gray-700 text-gray-300 font-medium rounded-xl transition-all duration-200 text-center">
                    Zur Anmeldeseite
                </a>
            </div>

            <!-- Reactivation Form -->
            <div x-show="showForm" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" style="display: none;">
                <h2 class="text-lg font-semibold text-purple-300 mb-4 text-left">Reaktivierung anfragen</h2>
                <form action="/request_reactivation" method="POST" class="space-y-4 text-left">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-1">Dein Benutzername</label>
                        <input type="text" name="username" required placeholder="Dein AstraOS-Benutzername"
                               class="w-full px-3 py-2.5 bg-gray-800/80 border border-gray-700 rounded-lg text-white text-sm
                                      focus:outline-none focus:ring-2 focus:ring-purple-500 placeholder-gray-600">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-1">
                            Begru&#x0308;ndung
                            <span class="text-gray-500 font-normal">(optional)</span>
                        </label>
                        <textarea name="reason" rows="3"
                                  placeholder="Warum soll dein Account reaktiviert werden?"
                                  class="w-full px-3 py-2.5 bg-gray-800/80 border border-gray-700 rounded-lg text-white text-sm resize-none
                                         focus:outline-none focus:ring-2 focus:ring-purple-500 placeholder-gray-600"></textarea>
                    </div>

                    <div class="bg-indigo-950/50 border border-indigo-500/30 rounded-lg p-3 text-xs text-indigo-300">
                        Deine Anfrage wird dem Administrator gemeldet und per Discord zugestellt.
                    </div>

                    <div class="flex gap-3 pt-1">
                        <button type="button" @click="showForm = false"
                                class="flex-1 py-2.5 rounded-lg text-gray-300 bg-gray-700/60 hover:bg-gray-700 transition text-sm font-medium">
                            Abbrechen
                        </button>
                        <button type="submit"
                                class="flex-1 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition text-sm">
                            Anfrage senden
                        </button>
                    </div>
                </form>
            </div>

        </div>

        <!-- Footer -->
        <p class="text-center text-gray-600 text-xs mt-6">
            &copy; 2026 AstraOS &nbsp;|&nbsp;
            <a href="/impressum" class="hover:text-gray-400 transition">Impressum</a>
        </p>
    </div>

    <script>
        const bg = document.querySelector('.animated-bg');
        if (bg) {
            for (let i = 0; i < 40; i++) {
                const dot = document.createElement('div');
                dot.classList.add('dot');
                dot.style.left = `${Math.random() * 100}vw`;
                dot.style.animationDelay = `${Math.random() * -20}s`;
                dot.style.animationDuration = `${20 + Math.random() * 10}s`;
                bg.appendChild(dot);
            }
        }
        gsap.from('#mainCard', { opacity: 0, y: 30, duration: 0.6, ease: 'power2.out' });
    </script>
</body>
</html>
