<div class="space-y-5">
    {{-- 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">{{ __('terminal.eyebrow') }}</p>
            <h1 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('terminal.host_heading') }}</h1>
            <p class="mt-1 text-sm text-ink-3">{{ __('terminal.host_page_subtitle') }}</p>
        </div>
        <button type="button" wire:click="configureHost"
            class="inline-flex items-center gap-2 rounded-md border border-line bg-surface px-3 py-1.5 font-mono text-[11px] text-ink-3 transition-colors hover:border-accent/40 hover:text-accent-text">
            <x-icon name="settings" class="h-3.5 w-3.5" />
            {{ __('terminal.host_configure') }}
        </button>
    </div>

    {{-- Host login summary --}}
    <div class="flex items-center gap-3 rounded-lg border border-line bg-surface px-4 py-3">
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-accent/25 bg-accent/10 text-accent">
            <x-icon name="command" class="h-4 w-4" />
        </span>
        <div class="min-w-0 flex-1">
            <p class="font-mono text-sm text-ink">{{ __('terminal.host_label') }}</p>
            <p @class(['truncate font-mono text-[11px]', 'text-ink-3' => $hostConfigured, 'text-warning' => ! $hostConfigured])>
                {{ $hostConfigured ? $hostTarget.'@host.docker.internal' : __('terminal.host_not_configured') }}
            </p>
        </div>
    </div>

    {{-- Terminal island (self-contained; Livewire never touches it after the first render) --}}
    <div wire:ignore x-data="terminalView()" x-on:terminal-open.window="open($event.detail)"
        class="flex min-h-[28rem] flex-col overflow-hidden rounded-xl border border-line bg-void shadow-panel">
        {{-- Toolbar --}}
        <div class="flex items-center gap-3 border-b border-line-soft bg-surface px-4 py-2.5">
            <span class="flex gap-1.5">
                <span class="h-2.5 w-2.5 rounded-full bg-offline/70"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-warning/70"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-online/70"></span>
            </span>
            <span class="truncate font-mono text-[12px] text-ink-2" data-fallback="{{ __('terminal.host_label') }}" x-text="title || $el.dataset.fallback"></span>
            <span class="ml-auto flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em]">
                <span class="h-1.5 w-1.5 rounded-full"
                    :class="{ 'bg-ink-4': status==='idle', 'bg-warning': status==='connecting', 'bg-online': status==='connected', 'bg-offline': status==='error'||status==='closed' }"></span>
                <span class="text-ink-3"
                    x-text="({idle:'{{ __('terminal.status_idle') }}',connecting:'{{ __('terminal.status_connecting') }}',connected:'{{ __('terminal.status_connected') }}',closed:'{{ __('terminal.status_closed') }}',error:'{{ __('terminal.status_error') }}'})[status]"></span>
            </span>
            <button type="button" x-on:click="clear()" class="rounded-md border border-line px-2.5 py-1 font-mono text-[11px] text-ink-3 transition-colors hover:border-accent/40 hover:text-accent-text">{{ __('terminal.clear') }}</button>
        </div>

        {{-- Screen --}}
        <div class="relative flex-1">
            <div x-ref="screen" class="absolute inset-0 p-2"></div>
            {{-- Idle placeholder + connect action --}}
            <div x-show="status==='idle'" class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-center">
                <x-icon name="command" class="h-7 w-7 text-ink-4" />
                <button type="button" wire:click="open" wire:loading.attr="disabled"
                    class="pointer-events-auto rounded-md border border-accent/40 bg-accent/10 px-4 py-1.5 font-mono text-[12px] text-accent-text transition-colors hover:bg-accent/20">
                    {{ __('terminal.connect_host') }}
                </button>
            </div>
        </div>
    </div>
</div>
