{% extends "sidebar.html" %}

{% block title %}AstraOS — Status Page{% endblock %}

{% block head %}
<style>
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.status-online {
    background-color: #2ecc71;
    box-shadow: 0 0 8px #2ecc71;
}
.status-offline {
    background-color: #e74c3c;
    box-shadow: 0 0 8px #e74c3c;
}
.status-wartung {
    background-color: #f39c12;
    box-shadow: 0 0 8px #f39c12;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
</style>
{% endblock %}

{% block content %}
<!-- HEADER -->
<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 Status</h2>
</header>
<!-- STATUS LIST -->
<div class="space-y-4">
    <!-- Chainsaw Hood SCP:SL server -->
    <div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <span class="text-xl font-semibold text-gray-200">Chainsaw Hood SCP:SL Server</span>
        <div class="flex items-center gap-3">
            <span class="text-green-400 font-semibold">Online</span>
            <div class="status-indicator status-online"></div>
        </div>
    </div>

    <!-- Kettensägen Gamepanel -->
    <div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <span class="text-xl font-semibold text-gray-200">Kettensägen Gamepanel</span>
        <div class="flex items-center gap-3">
            <span class="text-green-400 font-semibold">Online</span>
            <div class="status-indicator status-online"></div>
        </div>
    </div>

    <!-- Discord Bots -->
    <div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <span class="text-xl font-semibold text-gray-200">Discord Bots</span>
        <div class="flex items-center gap-3">
            <span class="text-yellow-400 font-semibold">Wartungsarbeiten</span>
            <div class="status-indicator status-wartung"></div>
        </div>
    </div>

    <!-- Datenbank -->
    <div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
                {% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
        <span class="text-xl font-semibold text-gray-200">Datenbank</span>
        <div class="flex items-center gap-3">
            <span class="text-red-400 font-semibold">Offline</span>
            <div class="status-indicator status-offline"></div>
        </div>
    </div>
</div>
{% endblock %}