{{ define "repo/fragments/reactionsPopup" }}
  {{ $id := printf "%s-%s" (string .CommentRkey) .Scope }}
  <button
    type="button"
    popovertarget="reactions-popover-{{ $id }}"
    style="anchor-name: --reactions-anchor-{{ $id }}"
    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 }};"
    class="[position-area:bottom_center] justify-self-center w-max h-fit inset-auto mt-1 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg"
  >
    <div class="grid grid-cols-4">
      {{ range $kind := const.OrderedReactionKinds }}
      <button
        type="button"
        popovertarget="reactions-popover-{{ $id }}"
        popovertargetaction="hide"
        class="reactBtn-{{ $.CommentRkey }}-{{ $kind }} btn-flat px-3 text-base hover:bg-gray-100 dark:hover:bg-gray-700"
      >
        {{ $kind }}
      </button>
      {{ end }}
    </div>
  </div>
{{ end }}