{{ define "fragments/starBtn" }}
    {{/* NOTE: this fragment is always replaced with hx-swap-oob */}}
    <div
        id="starBtn"
        class="btn-group w-full"
        data-star-subject-at="{{ .SubjectAt }}"
        {{ if .HxSwapOob }}hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'{{ end }}
    >
        <button
            class="btn-group-item active flex-1 gap-1 group"
            {{ if .IsStarred }}
                hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
            {{ else }}
                hx-post="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
            {{ end }}
            hx-trigger="click"
            hx-disabled-elt="this"
        >
            {{ if .IsStarred }}
                {{ i "star" "w-4 h-4 shrink-0 fill-current inline group-[.htmx-request]:hidden" }}
            {{ else }}
                {{ i "star" "w-4 h-4 shrink-0 inline group-[.htmx-request]:hidden" }}
            {{ end }}
            {{ i "loader-circle" "w-4 h-4 shrink-0 animate-spin hidden group-[.htmx-request]:inline" }}
            <span class="group-[.htmx-request]:hidden">{{ if .IsStarred }}Unstar{{ else }}Star{{ end }}</span>
        </button>
        {{ if .RepoName }}
            {{ $did := .SubjectAt.Authority | string }}
            <a
                href="/{{ resolve $did }}/{{ .RepoName }}/stars"
                class="btn-group-item"
                title="Starred by"
            >
                {{ scaleFmt .StarCount }}
            </a>
        {{ else }}
            <span class="btn-group-item cursor-default">
                {{ scaleFmt .StarCount }}
            </span>
        {{ end }}
    </div>
{{ end }}
