@php
    // container state -> status-pill status
    $pill = fn (string $s) => match (true) {
        $s === 'running' => 'online',
        $s === 'paused' => 'warning',
        in_array($s, ['created', 'restarting'], true) => 'pending',
        default => 'offline', // exited / dead / removing
    };
    $hostOn = $this->hostConfigured();
    $effTarget = $this->effectiveTarget();
    $active = $this->activeServer();
    $targetName = $effTarget === 'host' ? __('docker.host_target') : $active?->name;
@endphp

<div class="space-y-4" @if (! $ready) wire:init="load" @endif>
    {{-- Header --}}
    <div class="flex flex-wrap items-end justify-between gap-3">
        <div>
            <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">{{ __('docker.eyebrow') }}</p>
            <h2 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('docker.title') }}</h2>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            {{-- Target switch: the Clusev host vs the active fleet server (only when a host login exists) --}}
            @if ($hostOn)
                <div class="inline-flex rounded-lg border border-line bg-surface p-0.5" role="tablist" aria-label="{{ __('docker.target_label') }}">
                    <button type="button" wire:click="setTarget('host')"
                        @class([
                            'rounded-md px-3 py-1 font-mono text-[11px] transition-colors',
                            'bg-accent/15 text-accent-text' => $effTarget === 'host',
                            'text-ink-3 hover:text-ink' => $effTarget !== 'host',
                        ])
                        aria-selected="{{ $effTarget === 'host' ? 'true' : 'false' }}">{{ __('docker.host_target') }}</button>
                    <button type="button" wire:click="setTarget('server')" @disabled(! $active)
                        @class([
                            'rounded-md px-3 py-1 font-mono text-[11px] transition-colors',
                            'bg-accent/15 text-accent-text' => $effTarget === 'server',
                            'text-ink-3 hover:text-ink' => $effTarget !== 'server',
                            'cursor-not-allowed opacity-40' => ! $active,
                        ])
                        aria-selected="{{ $effTarget === 'server' ? 'true' : 'false' }}">{{ $active?->name ?? __('docker.server_target') }}</button>
                </div>
            @endif

            <x-status-pill :status="$connected ? 'online' : 'offline'">{{ $connected ? __('docker.connected') : __('docker.disconnected') }}</x-status-pill>
        </div>
    </div>

    <x-panel :title="__('docker.containers_title')" :subtitle="$targetName" :padded="false">
        @if (! $ready)
            {{-- lazy skeleton --}}
            <div class="space-y-2 p-4 sm:p-5">
                @for ($i = 0; $i < 3; $i++)
                    <div class="h-12 animate-pulse rounded-md bg-raised/50"></div>
                @endfor
            </div>
        @elseif ($hostNotConfigured)
            {{-- Host target picked but no host SSH login yet — send the operator to setup. --}}
            <div class="px-4 py-10 text-center sm:px-5">
                <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-raised text-ink-3">
                    <x-icon name="terminal" class="h-5 w-5" />
                </div>
                <p class="mt-3 text-sm text-ink-2">{{ __('docker.host_unconfigured_title') }}</p>
                <p class="mx-auto mt-1 max-w-md font-mono text-[11px] text-ink-4">{{ __('docker.host_unconfigured_hint') }}</p>
            </div>
        @elseif ($notInstalled)
            {{-- Honest, neutral state: the target simply has no docker (not a fault). --}}
            <div class="px-4 py-10 text-center sm:px-5">
                <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-raised text-ink-3">
                    <x-icon name="box" class="h-5 w-5" />
                </div>
                <p class="mt-3 text-sm text-ink-2">{{ __('docker.not_installed_title') }}</p>
                <p class="mx-auto mt-1 max-w-md font-mono text-[11px] text-ink-4">{{ __('docker.not_installed_hint') }}</p>
            </div>
        @elseif (! $connected)
            <div class="px-4 py-10 text-center sm:px-5">
                <p class="text-sm text-ink-2">{{ __('docker.unavailable_title') }}</p>
                <p class="mt-1 font-mono text-[11px] text-ink-4">{{ __('docker.unavailable_hint') }}</p>
                @if ($error)
                    <pre class="mx-auto mt-3 max-w-xl overflow-auto rounded-md border border-offline/25 bg-offline/10 p-2.5 text-left font-mono text-[11px] text-offline">{{ $error }}</pre>
                @endif
            </div>
        @elseif (empty($containers))
            <div class="px-4 py-10 text-center sm:px-5">
                <p class="text-sm text-ink-2">{{ __('docker.empty_title') }}</p>
                <p class="mt-1 font-mono text-[11px] text-ink-4">{{ __('docker.empty_hint') }}</p>
            </div>
        @else
            <div class="divide-y divide-line">
                @foreach ($containers as $c)
                    <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($c['state'])" :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>
                            {{-- Just the image — the raw port list is noisy and rarely useful at a glance. --}}
                            <p class="truncate font-mono text-[11px] text-ink-3">{{ $c['image'] }}</p>
                        </div>
                        <x-status-pill :status="$pill($c['state'])" class="hidden sm:inline-flex">{{ $c['state'] ?: '—' }}</x-status-pill>

                        <div class="flex flex-wrap items-center gap-1.5 pl-5 sm:pl-0">
                            @can('operate')
                                <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
                            @endcan
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </x-panel>
</div>