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

<head>
    <link rel="stylesheet" href="~/css/main.css" />
    <link rel="stylesheet" href="~/css/server-overview.css" />
</head>

<div class="d-flex align-items-center justify-content-between mb-4">

    <h1 class="mb-4"">
        <i class="bi bi-hdd-network"></i>  Serverübersicht
    </h1>

    <a class="nav-link" href="/Server/addServer">
        <button class="btn btn-primary"> Server hnzufügen </button>
    </a>
    
</div>



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



@section Scripts {
    <script>
        async function loadServerCards() {
            try {
                const response = await fetch('/Server/ServerCardPartial');
                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>
}