<div class="p-5 sm:p-6">
    <div class="flex items-start gap-3.5">
        <span class="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent-text">
            <x-icon name="command" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <h2 class="font-display text-base font-semibold text-ink">{{ __('terminal.host_setup_title') }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-ink-2">{{ __('terminal.host_setup_subtitle') }}</p>
        </div>
    </div>

    @if ($configured)
        {{-- Make the saved state unmistakable: the stored secret is never shown (security), so without
             this the empty password field reads as "not configured". --}}
        <div class="mt-4 flex items-start gap-2 rounded-md border border-online/25 bg-online/5 px-3 py-2.5 font-mono text-[11px] leading-relaxed text-ink-2">
            <x-icon name="shield" class="mt-px h-3.5 w-3.5 shrink-0 text-online" />
            <span>{{ __('terminal.host_configured_note', ['user' => $username]) }}</span>
        </div>
    @endif

    <div class="mt-4 space-y-3">
        {{-- Target is fixed to the local machine (the Docker host) — only the login is asked for. --}}
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
            <div class="sm:col-span-2">
                <label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('terminal.host_field_user') }}</label>
                <input wire:model="username" type="text" placeholder="root"
                       class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
                @error('username')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('terminal.host_field_port') }}</label>
                <input wire:model="port" type="number" min="1" max="65535" placeholder="22"
                       class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
                @error('port')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
            </div>
        </div>

        <div>
            <label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('terminal.host_field_auth') }}</label>
            <select wire:model.live="authType"
                    class="h-9 w-full rounded-md border border-line bg-inset px-3 text-sm text-ink focus:border-accent/40 focus:outline-none">
                <option value="password">{{ __('terminal.host_auth_password') }}</option>
                <option value="key">{{ __('terminal.host_auth_key') }}</option>
            </select>
        </div>

        <div>
            <label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ $authType === 'key' ? __('terminal.host_field_key') : __('terminal.host_field_password') }}</label>
            @if ($authType === 'key')
                <textarea wire:model="secret" rows="4" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
                          class="w-full resize-none rounded-md border border-line bg-inset px-3 py-2.5 font-mono text-xs text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none"></textarea>
            @else
                <input wire:model="secret" type="password" placeholder="{{ $configured ? __('terminal.host_secret_keep') : '••••••••' }}"
                       class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
            @endif
            @error('secret')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
        </div>

        @if ($authType === 'key')
            <div>
                <label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('terminal.host_field_passphrase') }}</label>
                <input wire:model="passphrase" type="password" placeholder="••••••••"
                       class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
            </div>
        @endif

        <p class="flex items-start gap-2 rounded-md border border-warning/25 bg-warning/5 px-3 py-2.5 font-mono text-[11px] leading-relaxed text-ink-3">
            <x-icon name="alert" class="mt-px h-3.5 w-3.5 shrink-0 text-warning" />
            {{ __('terminal.host_security_note') }}
        </p>
    </div>

    <div class="mt-6 flex items-center justify-between gap-2">
        <div>
            @if ($configured)
                <x-btn variant="ghost" wire:click="remove" wire:target="remove" wire:loading.attr="disabled" class="text-offline hover:text-offline">
                    <x-icon name="trash" class="h-3.5 w-3.5" />
                    {{ __('terminal.host_remove') }}
                </x-btn>
            @endif
        </div>
        <div class="flex items-center gap-2">
            <x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ __('common.cancel') }}</x-btn>
            <x-btn variant="primary" wire:click="save" wire:target="save" wire:loading.attr="disabled">
                <x-icon name="save" class="h-3.5 w-3.5" wire:loading.remove wire:target="save" />
                <svg wire:loading wire:target="save" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                {{ __('terminal.host_save') }}
            </x-btn>
        </div>
    </div>
</div>
