@model Watcher.ViewModels.ServerOverviewViewModel
@{
    ViewData["Title"] = "Serverübersicht";
}

<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h2 fw-bold mb-0">
        <i class="bi bi-hdd-network me-2 text-primary"></i>Serverübersicht
    </h1>
    <a asp-controller="Server" asp-action="AddServer"
       class="btn btn-primary d-flex align-items-center gap-1">
        <i class="bi bi-plus-circle"></i> Server hinzufügen
    </a>
</div>

<div id="server-cards-container">
    @await Html.PartialAsync("_ServerCard", Model.Servers)
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="~/js/server_uptime.js"></script>

    <script>
        async function loadServerCards() {  
            try {
                const response = await fetch('/Server/ServerCardsPartial');
                if (response.ok) {
                    const html = await response.text();
                    document.getElementById('server-cards-container').innerHTML = html;
                } else {
                    console.error('Fehler beim Nachladen der Serverkarten');
                }
            } catch (err) {
                console.error('Netzwerkfehler beim Nachladen der Serverkarten:', err);
            }
        }

        // Initial laden und dann alle 30 Sekunden
        loadServerCards();
        setInterval(loadServerCards, 30000);
    </script>
}
