@props(['container', 'canOperate' => true])
@php
    // container state -> status-pill status (single source of truth for both the host Docker page
    // and the per-server Docker tab).
    $c = $container;
    $pill = match (true) {
        $c['state'] === 'running' => 'online',
        $c['state'] === 'paused' => 'warning',
        in_array($c['state'], ['created', 'restarting'], true) => 'pending',
        default => 'offline', // exited / dead / removing
    };
@endphp
{{-- wire:click targets (viewLogs / action) resolve to the enclosing Livewire component — both
     Docker\Index and Servers\ServerDocker expose the same method names, so the row works in either. --}}
<div wire:key="ctr-{{ $c['id'] }}" class="flex flex-wrap items-center gap-3 px-4 py-3 sm:px-5">
    <x-status-dot :status="$pill" :ping="$c['state'] === 'running'" class="h-2.5 w-2.5" />
    <div class="min-w-0 flex-1">
        <p class="truncate font-mono text-sm text-ink">{{ $c['name'] }}</p>
        <p class="truncate font-mono text-[11px] text-ink-3">{{ $c['image'] }}</p>
    </div>
    <x-status-pill :status="$pill" class="hidden sm:inline-flex">{{ $c['state'] ?: '—' }}</x-status-pill>

    @if ($canOperate)
        <div class="flex flex-wrap items-center gap-1.5 pl-5 sm:pl-0">
            <x-btn variant="secondary" wire:click="viewLogs('{{ $c['id'] }}')">{{ __('docker.logs') }}</x-btn>
            @if ($c['state'] === 'running')
                <x-btn variant="secondary" wire:click="action('{{ $c['id'] }}', 'restart')" wire:loading.attr="disabled">{{ __('docker.restart') }}</x-btn>
                <x-btn variant="danger-soft" wire:click="action('{{ $c['id'] }}', 'stop')" wire:loading.attr="disabled">{{ __('docker.stop') }}</x-btn>
            @else
                <x-btn variant="secondary" wire:click="action('{{ $c['id'] }}', 'start')" wire:loading.attr="disabled">{{ __('docker.start') }}</x-btn>
            @endif
        </div>
    @endif
</div>