{% 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 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>

<div class="space-y-4" id="status-list">
    <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 id="scpsl-status-text" class="font-semibold">Lädt...</span>
            <div id="scpsl-status-indicator" class="status-indicator status-offline"></div>
        </div>
    </div>
    <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 id="gamepanel-status-text" class="font-semibold">Lädt...</span>
            <div id="gamepanel-status-indicator" class="status-indicator status-offline"></div>
        </div>
    </div>
    <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 id="discordbots-status-text" class="font-semibold">Lädt...</span>
            <div id="discordbots-status-indicator" class="status-indicator status-offline"></div>
        </div>
    </div>
    <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 id="db-status-text" class="font-semibold">Lädt...</span>
            <div id="db-status-indicator" class="status-indicator status-offline"></div>
        </div>
    </div>
</div>

<script>
function updateStatusPage() {
    fetch('/api/system_status')
        .then(res => res.json())
        .then(data => {
            function setStatus(id, status) {
                let text = "";
                let indicator = "";
                if (status === "online") {
                    text = "Online";
                    indicator = "status-online";
                } else if (status === "offline") {
                    text = "Offline";
                    indicator = "status-offline";
                } else if (status === "wartung") {
                    text = "Wartungsarbeiten";
                    indicator = "status-wartung";
                } else {
                    text = status;
                    indicator = "status-offline";
                }
                document.getElementById(id + "-status-text").textContent = text;
                let el = document.getElementById(id + "-status-indicator");
                el.classList.remove("status-online", "status-offline", "status-wartung");
                el.classList.add(indicator);
            }
            setStatus("scpsl", data.scpsl);
            setStatus("gamepanel", data.gamepanel);
            setStatus("discordbots", data.discord_bots);
            setStatus("db", data.database);
        });
}
setInterval(updateStatusPage, 5000);
updateStatusPage();
</script>
{% endblock %}