{{ define "repo/fragments/reaction" }}
    <button
        data-reaction-kind="{{ .Kind }}"
        data-subject-uri="{{ .SubjectUri | string | safeUrl }}"
        class="flex justify-center items-center min-h-8 rounded border
            leading-4 px-2 gap-1.5 text-sm relative group
            {{ if eq .Count 0 }}
                hidden
            {{ end }}
            {{ if .IsReacted }}
                bg-gray-100 border-gray-300 text-gray-700
                hover:bg-gray-200 hover:border-gray-400
                dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100
                dark:hover:bg-gray-600 dark:hover:border-gray-500
            {{ else }}
                border-gray-200 text-gray-600
                hover:bg-gray-50 hover:border-gray-300
                dark:border-gray-700 dark:text-gray-300
                dark:hover:bg-gray-800 dark:hover:border-gray-600
            {{ end }}
            "
        {{ if gt (length .Users) 0 }}
          title="{{ range $i, $did := .Users }}{{ if ne $i 0 }}, {{ end }}{{ resolve $did }}{{ end }}{{ if gt .Count (length .Users) }}, and {{ sub .Count (length .Users) }} more{{ end }}"
        {{ else }}
          title="{{ .Kind }}"
        {{ end }}
        {{ if .IsReacted }}
            hx-delete="/react?kind={{ .Kind }}&subject-uri={{ .SubjectUri | urlquery }}"
        {{ else }}
            hx-post="/react?kind={{ .Kind }}&subject-uri={{ .SubjectUri | urlquery }}"
        {{ end }}
        hx-swap="outerHTML"
        hx-trigger="click from:button[data-subject-uri='{{ .SubjectUri }}'][data-reaction-kind='{{ .Kind }}']"
        hx-disabled-elt="this"
    >
        <span class="inline group-[.htmx-request]:hidden">{{ .Kind }}</span>
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        <span>{{ .Count }}</span>
    </button>
{{ end }}
