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

<div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold">Containerübersicht</h1>
    <a asp-action="AddContainer" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
        + Container hinzufügen
    </a>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach (var container in Model.Containers)
    {
        <div class="bg-white shadow-md rounded-xl p-5 border border-gray-200 hover:shadow-lg transition duration-200">
            <h2 class="text-xl font-semibold mb-1">@container.Name</h2>
            <p class="text-sm text-gray-600 mb-2"><strong>Image:</strong> @container.Image</p>
            <p class="text-sm text-gray-600"><strong>Hostname:</strong> @container.Hostname</p>
            <p class="text-sm text-gray-600"><strong>Status:</strong> @container.Status</p>
            <p class="text-sm text-gray-600 mb-3">
                <strong>Läuft:</strong>
                <span class="@(container.IsRunning ? "text-green-600" : "text-red-600")">
                    @(container.IsRunning ? "Ja" : "Nein")
                </span>
            </p>
            <div class="flex justify-end gap-2">
                <a asp-action="Edit" asp-route-id="@container.Id"
                   class="text-blue-600 hover:underline text-sm">Bearbeiten</a>
                <a asp-action="Delete" asp-route-id="@container.Id"
                   class="text-red-600 hover:underline text-sm">Löschen</a>
            </div>
        </div>
    }
</div>

