{{ define "fragments/starBtn" }}
    <button
        id="starBtn"
        class="btn disabled:opacity-50 disabled:cursor-not-allowed flex gap-2 items-center group"
        data-star-subject-at="{{ .SubjectAt }}"
        {{ if .IsStarred }}
            hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}"
        {{ else }}
            hx-post="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}"
        {{ end }}

        hx-trigger="click"
        hx-target="this"
        hx-swap="outerHTML"
        hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'
        hx-disabled-elt="#starBtn"
    >
        {{ if .IsStarred }}
            {{ i "star" "w-4 h-4 fill-current" }}
        {{ else }}
            {{ i "star" "w-4 h-4" }}
        {{ end }}
        <span class="text-sm">
            {{ .StarCount }}
        </span>
        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
    </button>
{{ end }}