clusev/resources/views/livewire/docker/index.blade.php

60 lines
3.3 KiB
PHP

<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>
<p class="mt-1 text-sm text-ink-3">{{ __('docker.host_subtitle') }}</p>
</div>
<x-status-pill :status="$connected ? 'online' : 'offline'">{{ $connected ? __('docker.connected') : __('docker.disconnected') }}</x-status-pill>
</div>
<x-panel :title="__('docker.containers_title')" :subtitle="__('docker.host_target')" :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 host 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)
<x-docker-container-row :container="$c" />
@endforeach
</div>
@endif
</x-panel>
</div>