{{ define "star" }}
{{/*
  Star component - displays star icon with count
  Required: .IsStarred (bool), .StarCount (int)
  Optional: .Interactive (bool), .Handle (string), .Repository (string)

  Interactive mode: renders as button with HTMX toggle
  Display mode: renders as span (default)
*/}}
{{ if .Interactive }}
{{ if .IsAuthenticated }}
<button class="btn btn-sm gap-2 btn-ghost group border border-transparent hover:border-primary{{ if .IsStarred }} border-star!{{ end }}"
        hx-ext="json-enc"
        {{ if .IsStarred }}
        hx-delete="/api/stars"
        {{ else }}
        hx-post="/api/stars"
        {{ end }}
        hx-vals='{{ dict "handle" .Handle "repo" .Repository | toJSON }}'
        hx-target="this"
        hx-swap="outerHTML"
        hx-on::before-request="this.disabled=true"
        hx-on::after-request="if(event.detail.xhr.status===401){window.location='/auth/oauth/login'}else if(!event.detail.successful){this.disabled=false}"
        aria-label="{{ if .IsStarred }}Unstar{{ else }}Star{{ end }} {{ .Handle }}/{{ .Repository }}">
    <svg class="icon size-4 text-star stroke-star transition-transform group-hover:scale-110{{ if .IsStarred }} fill-star!{{ end }}" aria-hidden="true"><use href="/icons.svg#star"></use></svg>
    <span>{{ .StarCount }}</span>
</button>
{{ else }}
{{/* Anon viewer: link to login so the click isn't an abrupt 401 redirect. */}}
<a href="/auth/oauth/login?return_to=/r/{{ .Handle }}/{{ .Repository }}"
   class="btn btn-sm gap-2 btn-ghost border border-transparent hover:border-primary"
   title="Sign in to star this repository"
   aria-label="Sign in to star {{ .Handle }}/{{ .Repository }}">
    <svg class="icon size-4 text-star stroke-star" aria-hidden="true"><use href="/icons.svg#star"></use></svg>
    <span>{{ .StarCount }}</span>
</a>
{{ end }}
{{ else }}
<span class="flex items-center gap-2 text-base-content/60" title="{{ .StarCount }} stars">
    <svg class="icon size-[1.1rem] text-star stroke-star{{ if .IsStarred }} fill-star!{{ end }}" aria-hidden="true"><use href="/icons.svg#star"></use></svg>
    <span class="font-semibold text-base-content">{{ .StarCount }}</span>
    <span class="sr-only">stars</span>
</span>
{{ end }}
{{ end }}