<div @if (! $ready) wire:init="load" @endif>
    <x-panel :title="__('docker.containers_title')" :subtitle="$server->name" :padded="false">
        @if (! $ready)
            <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 ($notInstalled)
            <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)
                    <x-docker-container-row :container="$c" :can-operate="(bool) auth()->user()?->can('operate')" />
                @endforeach
            </div>
        @endif
    </x-panel>
</div>
