{% extends "sidebar.html" %}

{% block title %}AstraOS — Altersüberprüfung{% endblock %}

{% block content %}
<header class="flex justify-between items-center mb-6">
    <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Altersüberprüfung</h2>
</header>

<!-- FLASH MESSAGES -->
{% 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 ('green' if category == 'success' else 'blue') }}-500/20 p-4 text-sm text-{{ 'red' if category == 'danger' else ('green' if category == 'success' else 'blue') }}-300 border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else 'blue') }}-500/30">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Verification Form -->
    <div class="bg-black/40 p-6 rounded-xl backdrop-blur border {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-semibold mb-4">Neue Überprüfung</h3>
        <form method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div>
                <label for="birthdate" class="block text-sm font-medium text-gray-300">Geburtsdatum</label>
                <input type="date" name="birthdate" id="birthdate" required
                       class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div>
                <label for="steam_id" class="block text-sm font-medium text-gray-300">SteamID</label>
                <input type="text" name="steam_id" id="steam_id" placeholder="z.B. STEAM_0:1:23456789" required
                       class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div>
                <label for="ingame_name" class="block text-sm font-medium text-gray-300">Ingame Name</label>
                <input type="text" name="ingame_name" id="ingame_name" placeholder="z.B. Max Mustermann" required
                       class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            </div>
            <div class="flex justify-end">
                <button type="submit" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                    Überprüfen
                </button>
            </div>
        </form>

        {% if result %}
        <div class="mt-6 border-t {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} pt-4">
            <h4 class="text-xl font-semibold mb-2">Ergebnis</h4>
            <p class="text-lg">Die Person ist <span class="font-bold {% if result.age < 13 %}text-red-400{% else %}text-green-400{% endif %}">{{ result.age }}</span> Jahre alt.</p>
            {% if result.age < 13 %}
                <p class="text-lg mt-2">Diese Person muss für <span class="font-bold text-yellow-400">{{ result.ban_duration_days }}</span> Tage gesperrt werden.</p>
                <div class="mt-4">
                    <label for="ban-command" class="block text-sm font-medium text-gray-300">Bann-Befehl</label>
                    <div class="flex items-center gap-2 mt-1">
                        <input type="text" id="ban-command" readonly value="{{ result.ban_command }}"
                               class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
                        <button onclick="copyToClipboard('ban-command')" class="flex-shrink-0 font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                            Kopieren
                        </button>
                    </div>
                </div>
            {% else %}
                <p class="text-lg mt-2 text-green-400">Keine Sperre erforderlich.</p>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- User Search -->
    <div class="bg-black/40 p-6 rounded-xl backdrop-blur border {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %}">
        <h3 class="text-2xl font-semibold mb-4">Benutzer suchen</h3>
        <form method="GET" class="flex gap-2 mb-4">
            <input type="text" name="search" placeholder="Suche nach Name oder SteamID..." value="{{ search_query }}"
                   class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
            <button type="submit" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
                Suchen
            </button>
        </form>

        <div class="space-y-2 max-h-96 overflow-y-auto">
            {% for user in users %}
            <a href="{{ url_for('view_user_age_details', user_id=user._id) }}" class="block p-3 rounded-lg transition {% if maintenance_active %}hover:bg-yellow-500/10{% else %}hover:bg-purple-500/10{% endif %}">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold {% if user.age < 13 %}text-red-400{% else %}text-white{% endif %}">{{ user.ingame_name }}</p>
                        <p class="text-sm text-gray-400">{{ user.steam_id }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-lg font-bold">{{ user.age }} Jahre</p>
                        <p class="text-xs text-gray-500">{{ user.timestamp.strftime('%d.%m.%Y') }}</p>
                    </div>
                </div>
            </a>
            {% else %}
            <p class="text-gray-400">Keine Benutzer gefunden.</p>
            {% endfor %}
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const input = document.getElementById(elementId);
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand('copy');
    // Optional: Visuelles Feedback geben
    const originalButtonText = event.target.innerText;
    event.target.innerText = 'Kopiert!';
    setTimeout(() => {
        event.target.innerText = originalButtonText;
    }, 1500);
}
</script>
{% endblock %}