{{ define "repo/settings/fragments/secretListing" }}
  {{ $root := index . 0 }}
  {{ $secret := index . 1 }}
  <div id="secret-{{$secret.Key}}" class="flex items-center justify-between p-2">
    <div class="hover:no-underline flex flex-col gap-1 text-sm min-w-0 max-w-[80%]">
      <span class="font-mono">
        {{ $secret.Key }}
      </span>
      <div class="flex flex-wrap text items-center gap-1 text-gray-500 dark:text-gray-400">
        <span>added by</span>
        <span>{{ template "user/fragments/picHandleLink" $secret.CreatedBy }}</span>
        <span class="before:content-['·'] before:select-none"></span>
        <span>{{ template "repo/fragments/shortTimeAgo" $secret.CreatedAt }}</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 secret"
      hx-delete="/{{ $root.RepoInfo.FullName }}/settings/secrets"
      hx-swap="none"
      hx-vals='{"key": "{{ $secret.Key }}"}'
      hx-confirm="Are you sure you want to delete the secret {{ $secret.Key }}?"
    >
      {{ 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 }}