<x-panel :title="__('auth.webauthn_title')" :subtitle="__('auth.webauthn_subtitle')">
    @if (! $available)
        <div class="flex items-start gap-2.5 rounded-md border border-line bg-inset px-4 py-3">
            <x-icon name="lock" class="mt-0.5 h-4 w-4 shrink-0 text-ink-4" />
            <p class="text-sm text-ink-3">{{ __('auth.webauthn_unavailable') }}</p>
        </div>
    @else
        <div class="space-y-4">
            <div class="divide-y divide-line">
                @forelse ($keys as $key)
                    <div wire:key="wak-{{ $key->id }}" class="flex items-center gap-3 py-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-md border border-line bg-inset text-ink-3">
                            <x-icon name="shield" class="h-4 w-4" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm text-ink">{{ $key->name }}</p>
                            <p class="truncate font-mono text-[11px] text-ink-3">
                                {{ __('auth.webauthn_added_on', ['date' => $key->created_at->diffForHumans()]) }}
                                · {{ $key->last_used_at ? __('auth.webauthn_last_used', ['date' => $key->last_used_at->diffForHumans()]) : __('auth.webauthn_never_used') }}
                            </p>
                        </div>
                        <x-modal-trigger variant="danger-soft" size="sm" class="shrink-0" action="confirmRemove({{ $key->id }})">
                            <x-icon name="trash" class="h-3.5 w-3.5" /> {{ __('common.remove') }}
                        </x-modal-trigger>
                    </div>
                @empty
                    <p class="py-3 font-mono text-[11px] text-ink-3">{{ __('auth.webauthn_none') }}</p>
                @endforelse
            </div>

            <div class="flex flex-col gap-2 sm:flex-row" x-data>
                <input wire:model="newName" type="text" maxlength="60" placeholder="{{ __('auth.webauthn_name_placeholder') }}"
                       class="h-9 w-full rounded-md border border-line bg-inset px-3 text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
                <x-btn variant="accent" class="w-full shrink-0 sm:w-auto" x-on:click="window.clusevWebauthn?.register($wire)">
                    <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('auth.webauthn_add') }}
                </x-btn>
            </div>
            @error('newName') <p class="font-mono text-[11px] text-offline">{{ $message }}</p> @enderror
        </div>
    @endif
</x-panel>
