{{define "passkeys_list.html"}}
<div class="grid gap-3">
    {{if .Passkeys}}
        {{range .Passkeys}}
        <div class="card flex items-center gap-4" id="passkey-{{.ID}}">
            <div class="flex-1 min-w-0">
                <strong class="text-white block truncate">{{if .Name}}{{.Name}}{{else}}Passkey{{end}}</strong>
                <div class="text-xs text-slate-500">Added {{.CreatedAt.Format "Jan 2, 2006"}}</div>
            </div>
            <button class="text-xs text-red-400 hover:text-red-300 transition-colors"
                    hx-delete="/passkeys/{{.ID}}"
                    hx-target="#passkey-{{.ID}}"
                    hx-swap="outerHTML"
                    hx-headers='{"X-CSRF-Token": "{{$.CSRFToken}}"}'
                    hx-confirm="Delete this passkey?">
                Delete
            </button>
        </div>
        {{end}}
    {{else}}
        <div class="card text-center text-slate-500 py-6 text-sm italic">No passkeys registered. Register one to enable passwordless login.</div>
    {{end}}
</div>
{{end}}