{#each stack.containerDetails as container (container.id)}
{@const isLoading = containerActionLoading === container.id}
{container.service}
{#if container.health}
{#if container.health === 'healthy'}
{:else if container.health === 'unhealthy'}
{:else}
{/if}
{/if}
{container.state}
{container.image}
{formatUptime(container.status)}
{#if container.restartCount > 0}
{container.restartCount}
{/if}
{#if container.state === 'running'}
{@const stats = containerStats.get(container.id)}
{@const history = containerStatsHistory.get(container.id)}
{#key statsUpdateCount}
CPU
{stats?.cpuPercent?.toFixed(0) ?? '-'}%
{#if history?.cpu && history.cpu.length >= 2}
{:else}
{/if}
Mem
{stats ? formatBytes(stats.memoryUsage) : '-'}
{#if history?.mem && history.mem.length >= 2}
{:else}
{/if}
Net
{stats ? formatBytes(stats.networkRx + stats.networkTx) : '-'}
{#if history?.netRx && history.netRx.length >= 2}
{:else}
{/if}
Disk
{stats ? formatBytes(stats.blockRead + stats.blockWrite) : '-'}
{#if history?.diskR && history.diskR.length >= 2}
{:else}
{/if}
{/key}
{/if}
{#if container.ports.length > 0}
{@const uniquePorts = container.ports.filter((p, i, arr) => p.publicPort && arr.findIndex(x => x.publicPort === p.publicPort) === i)}
{#each uniquePorts.slice(0, 2) as port}
{@const url = getPortUrl(port.publicPort)}
{#if url}
e.stopPropagation()}
class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
title="Open {url} in new tab"
>
:{port.publicPort}
{:else}
:{port.publicPort}
{/if}
{/each}
{#if uniquePorts.length > 2}
+{uniquePorts.length - 2}
{/if}
{/if}
{#if container.networks.length > 0}
{@const ip = getContainerIp(container.networks)}
{ip !== '-' ? ip : container.networks.length}
{#each container.networks as net}
{net.name}: {net.ipAddress || 'no IP'}
{/each}
{/if}
{#if container.volumeCount > 0}
{container.volumeCount}
{/if}
{#if container.state === 'running' && $canAccess('containers', 'exec')}
{/if}
{#if container.state === 'running' && $canAccess('containers', 'files')}
{/if}
{#if operationError?.id === container.id && operationError?.message}
{operationError.message}
{/if}
{#if isLoading}
{:else}
{#if container.state === 'running'}
{#if $canAccess('containers', 'restart')}
restartContainer(container.id)}
onOpenChange={(open) => confirmRestartContainerId = open ? container.id : null}
>
{#snippet children({ open })}
{/snippet}
{/if}
{#if $canAccess('containers', 'pause')}
pauseContainer(container.id)}
onOpenChange={(open) => confirmPauseContainerId = open ? container.id : null}
>
{#snippet children({ open })}
{/snippet}
{/if}
{#if $canAccess('containers', 'stop')}
stopContainer(container.id)}
onOpenChange={(open) => confirmStopContainerId = open ? container.id : null}
>
{#snippet children({ open })}
{/snippet}
{/if}
{:else if container.state === 'paused'}
{#if $canAccess('containers', 'unpause')}
{/if}
{:else}
{#if $canAccess('containers', 'start')}
{/if}
{/if}
{/if}