<section>
    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
        {{ __('passkeys::passkeys.passkeys') }}
    </h2>
    <div class="mt-2">
        <label for="name" class="block mt-1 text-sm text-gray-600 dark:text-gray-400">
            {{ __('passkeys::passkeys.name') }}
        </label>
        <form id="passkeyForm" wire:submit="validatePasskeyProperties" class="flex items-center space-x-2 mt-2">
            <div>
                <input autocomplete="off" type="text" wire:model="name" class="border-gray-300 dark:border-gray-700 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm">
                @error('name')
                <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <button type="submit" class="inline-flex items-center px-4 py-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                {{ __('passkeys::passkeys.create') }}
            </button>
        </form>
    </div>

    <div class="mt-6">
        <ul class="space-y-4">
            @foreach($passkeys as $passkey)
                <li class="flex justify-between items-center p-4 bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700 border rounded-lg shadow-sm">
                    <div class="text-gray-900 dark:text-gray-100">
                        {{ $passkey->name }}
                    </div>
                    <div class="ml-2 text-gray-900 dark:text-gray-100">
                        {{ __('passkeys::passkeys.last_used') }}: {{ $passkey->last_used_at?->diffForHumans() ?? __('passkeys::passkeys.not_used_yet') }}
                    </div>
                    <div>
                        <button wire:click="deletePasskey({{ $passkey->id }})" class="inline-flex items-center px-4 py-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                            {{ __('passkeys::passkeys.delete') }}
                        </button>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</section>

@include('passkeys::livewire.partials.createScript')
