<div wire:init="load">
    <div class="mb-4 flex items-center gap-2.5">
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-line bg-inset text-ink-2">
            <x-icon name="box" class="h-4 w-4" />
        </span>
        <div class="min-w-0 flex-1">
            <h2 class="truncate font-display text-base font-semibold text-ink" title="{{ $ref }}">{{ $ref }}</h2>
            <p class="font-mono text-[11px] text-ink-3">{{ __('docker.logs_subtitle') }}</p>
        </div>
    </div>

    @if (! $loaded)
        <div class="h-64 animate-pulse rounded-md bg-raised/50"></div>
    @elseif ($error)
        <div class="flex items-center gap-2.5 rounded-md border border-offline/25 bg-offline/10 px-3.5 py-3">
            <x-icon name="alert" class="h-4 w-4 shrink-0 text-offline" />
            <p class="text-sm text-ink-2">{{ $error }}</p>
        </div>
    @else
        <pre class="max-h-[60vh] overflow-auto rounded-md border border-line bg-void p-3 font-mono text-[11px] leading-relaxed text-ink-2">{{ $logs !== '' ? $logs : __('docker.logs_empty') }}</pre>
    @endif

    <div class="mt-4 flex justify-end">
        <x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ __('common.close') }}</x-btn>
    </div>
</div>
