{{ define "user/settings/fragments/keyListing" }}
  <div id="key-{{.Name}}" class="flex items-center justify-between p-2">
    <div class="hover:no-underline flex flex-col gap-1 text min-w-0 max-w-[80%]">
    <div class="flex items-center gap-2">
      <span>{{ i "key" "w-4" "h-4" }}</span>
      <span class="font-bold">
        {{ .Name }}
      </span>
    </div>
      <span class="font-mono text-sm text-gray-500 dark:text-gray-400">
        {{ sshFingerprint .Key }}
      </span>
      <div class="flex flex-wrap text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
        <span>added {{ template "repo/fragments/time" .Created }}</span>
      </div>
    </div>
    <button
      class="btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 gap-2 group"
      title="Delete key"
      hx-delete="/settings/keys?name={{urlquery .Name}}&rkey={{urlquery .Rkey}}"
      hx-target="closest div"
      hx-swap="delete"
      hx-confirm="Are you sure you want to delete the key {{ .Name }}?"
    >
      {{ i "trash-2" "w-5 h-5" }}
      <span class="hidden md:inline">Delete</span>
      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
    </button>
  </div>
{{ end }}