{{ define "repo/fragments/reactionsPopup" }}
  {{ $id := printf "%s-%s" (sanitizeAtUri .SubjectUri) .Scope }}
  <button
    type="button"
    popovertarget="reactions-popover-{{ $id }}"
    style="anchor-name: --reactions-anchor-{{ $id | safeCSS }}"
    class="
    flex justify-center items-center rounded
    text-gray-400 dark:text-gray-400
    hover:text-gray-500 dark:hover:text-gray-300
    cursor-pointer"
  >
    {{ i "smile-plus" "size-4" }}
  </button>
  <div
    id="reactions-popover-{{ $id }}"
    popover
    style="position-anchor: --reactions-anchor-{{ $id | safeCSS }};"
    class="[&:popover-open]:grid grid-cols-4 [position-area:bottom_center] justify-self-center w-max inset-auto mt-1 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg"
  >
    {{ range $kind := const.OrderedReactionKinds }}
    <button
      type="button"
      popovertarget="reactions-popover-{{ $id }}"
      popovertargetaction="hide"
      data-reaction-kind="{{ $kind }}"
      data-subject-uri="{{ $.SubjectUri | string | safeUrl }}"
      class="btn-flat px-3 text-base hover:bg-gray-100 dark:hover:bg-gray-700"
    >
      {{ $kind }}
    </button>
    {{ end }}
  </div>
{{ end }}
