@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>
    <form asp-action="AddServer" method="get" asp-controller="Server">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi"></i> neuen Server erstellen
                    </button>
                </form>
</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>
}