{% extends "sidebar.html" %}

{% block title %}AstraOS — Benutzerdetails{% 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 %}">Benutzerdetails</h2>
    <a href="{{ url_for('age_verification') }}" 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 %}">
        &larr; Zurück
    </a>
</header>

<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 %}">
    <div class="space-y-3">
        <div>
            <p class="text-sm text-gray-400">Ingame Name</p>
            <p class="text-xl font-semibold">{{ user.ingame_name }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-400">SteamID</p>
            <p class="text-xl font-semibold">{{ user.steam_id }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-400">Geburtsdatum</p>
            <p class="text-xl font-semibold">{{ user.birthdate }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-400">Alter bei Überprüfung</p>
            <p class="text-xl font-bold {% if user.age < 13 %}text-red-400{% else %}text-green-400{% endif %}">{{ user.age }} Jahre</p>
        </div>
        <div>
            <p class="text-sm text-gray-400">Überprüft von</p>
            <p class="text-xl font-semibold">{{ user.checked_by }} am {{ user.timestamp.strftime('%d.%m.%Y um %H:%M') }}</p>
        </div>
    </div>

    {% 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">Aktion erforderlich</h4>
        <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>
    </div>
    {% elif user.age >= 13 %}
    <div class="mt-6 border-t {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} pt-4">
        <p class="text-lg text-green-400">Keine Sperre erforderlich.</p>
    </div>
    {% endif %}
</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 %}