<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.add_ssh_key.title') }}</h2>
            <p class="mt-1 text-sm leading-relaxed text-ink-2">{{ __('modals.add_ssh_key.subtitle_before') }} <span class="font-mono text-ink-3">~/.ssh/authorized_keys</span> {{ __('modals.add_ssh_key.subtitle_after') }}</p>
        </div>
    </div>

    <div class="mt-4">
        <label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('modals.add_ssh_key.name_label') }}</label>
        <input wire:model="keyName" type="text" maxlength="64" placeholder="{{ __('modals.add_ssh_key.name_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>

    <div class="mt-4">
        <div class="mb-1 flex items-center justify-between">
            <label class="font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('modals.add_ssh_key.public_key_label') }}</label>
            <button type="button" wire:click="generate" wire:target="generate" wire:loading.attr="disabled" class="font-mono text-[11px] text-accent-text transition-colors hover:text-accent disabled:opacity-50">
                <span wire:loading.remove wire:target="generate">{{ __('modals.add_ssh_key.generate') }}</span>
                <span wire:loading wire:target="generate">{{ __('modals.add_ssh_key.generating') }}</span>
            </button>
        </div>
        <textarea
            wire:model="publicKey"
            rows="3"
            placeholder="{{ __('modals.add_ssh_key.public_key_placeholder') }}"
            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>

        @if ($generatedPrivate)
            <div class="mt-3 rounded-md border border-warning/30 bg-warning/10 p-3">
                <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.add_ssh_key.private_key_warning') }}
                </p>
                <textarea readonly rows="4" 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">{{ $generatedPrivate }}</textarea>
            </div>
        @endif

        @if ($error)
            <p class="mt-2 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" />{{ $error }}
            </p>
        @endif
    </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="save" wire:target="save" wire:loading.attr="disabled">
            <x-icon name="plus" 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>
            {{ __('common.add') }}
        </x-btn>
    </div>
</div>
