{% extends "sidebar.html" %}

{% block title %}AstraOS — Logs{% endblock %}

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

<div class="bg-black/40 rounded-xl backdrop-blur-lg overflow-hidden
            {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/20{% endif %}">
            <thead class="bg-black/20">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Benutzer</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Aktion</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Details</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Zeitstempel (UTC)</th>
                </tr>
            </thead>
            <tbody class="divide-y {% if maintenance_active %}divide-yellow-500/30{% else %}divide-purple-500/30{% endif %}">
                {% for log in logs %}
                <tr class="transition {% if maintenance_active %}hover:bg-yellow-500/5{% else %}hover:bg-purple-500/5{% endif %}">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{{ log.username }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">{{ log.action }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">{{ log.details if log.details else '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">{{ log.timestamp.strftime('%d.%m.%Y %H:%M:%S') }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="px-6 py-4 text-center text-gray-400">Keine Logs gefunden.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% if total_pages > 1 %}
<nav class="mt-6 flex items-center justify-between">
    <div>
        <p class="text-sm text-gray-400">
            Seite <span class="font-medium">{{ page }}</span> von <span class="font-medium">{{ total_pages }}</span>
        </p>
    </div>
    <div class="flex-1 flex justify-end gap-2">
        <a href="{{ url_for('logs', page=page-1) }}"
           class="relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700
                  {% if page <= 1 %}pointer-events-none opacity-50{% endif %}">
            Vorherige
        </a>
        <a href="{{ url_for('logs', page=page+1) }}"
           class="relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700
                  {% if page >= total_pages %}pointer-events-none opacity-50{% endif %}">
            Nächste
        </a>
    </div>
</nav>
{% endif %}

{% endblock %}