<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="shield" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <h2 class="font-display text-base font-semibold text-ink">{{ __('modals.ssh_key_provision.title') }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-ink-2">{{ __('modals.ssh_key_provision.subtitle', ['server' => $serverName]) }}</p>
        </div>
    </div>

    @if (! $done)
        <div class="mt-4 rounded-md border border-line bg-inset p-4">
            <p class="font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('modals.ssh_key_provision.steps_title') }}</p>
            <ol class="mt-2 list-decimal space-y-1 pl-4 text-sm text-ink-2">
                <li>{{ __('modals.ssh_key_provision.step_generate') }}</li>
                <li>{{ __('modals.ssh_key_provision.step_verify') }}</li>
                <li>{{ __('modals.ssh_key_provision.step_disable') }}</li>
            </ol>
            <p class="mt-3 flex items-start gap-1.5 font-mono text-[11px] text-ink-4">
                <x-icon name="shield" class="mt-0.5 h-3.5 w-3.5 shrink-0" />{{ __('modals.ssh_key_provision.safety_note') }}
            </p>
        </div>

        <div class="mt-6 flex items-center justify-end gap-2">
            <x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ __('common.cancel') }}</x-btn>
            <x-btn variant="primary" wire:click="run" wire:target="run" wire:loading.attr="disabled">
                <svg wire:loading wire:target="run" 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>
                <span wire:loading.remove wire:target="run">{{ __('modals.ssh_key_provision.confirm') }}</span>
                <span wire:loading wire:target="run">{{ __('modals.ssh_key_provision.running') }}</span>
            </x-btn>
        </div>
    @else
        @if ($ok)
            <p class="mt-4 flex items-center gap-1.5 font-mono text-[11px] text-online"><x-icon name="lock" class="h-3.5 w-3.5 shrink-0" />{{ __('modals.ssh_key_provision.result_ok') }}</p>
        @else
            <p class="mt-4 flex items-start gap-1.5 font-mono text-[11px] text-warning"><x-icon name="alert" class="mt-0.5 h-3.5 w-3.5 shrink-0" />{{ $error }}</p>
        @endif

        @if ($privateKey)
            <div class="mt-3 rounded-md border border-warning/30 bg-warning/10 p-3" x-data>
                <p class="flex items-center gap-1.5 font-mono text-[11px] text-warning"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ __('modals.ssh_key_provision.key_warning') }}</p>
                <textarea x-ref="pk" readonly rows="6" x-on:click="$el.select()"
                    class="mt-2 w-full resize-none rounded-md border border-line bg-void px-3 py-2 font-mono text-[10px] leading-relaxed text-ink-2 focus:outline-none">{{ $privateKey }}</textarea>
                <div class="mt-2">
                    <x-btn variant="secondary" size="sm"
                        x-on:click="const b=new Blob([$refs.pk.value],{type:'text/plain'});const a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='clusev-{{ \Illuminate\Support\Str::slug($serverName) ?: 'server' }}-id_ed25519';a.click();URL.revokeObjectURL(a.href)">
                        <x-icon name="folder" class="h-3.5 w-3.5" /> {{ __('modals.ssh_key_provision.download') }}
                    </x-btn>
                </div>
            </div>
        @endif

        <div class="mt-6 flex items-center justify-end">
            <x-btn variant="primary" wire:click="$dispatch('closeModal')">{{ __('modals.ssh_key_provision.done') }}</x-btn>
        </div>
    @endif
</div>
