{{ define "fragments/comment/commentHeader" }}
  <div
    class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 "
    hx-target="next .comment-body"
    id="comment-header-{{ .Comment.Rkey }}"
    {{ if .HxSwapOob }}hx-swap-oob="outerHTML"{{ end }}
  >
    {{ $handle := resolve .Comment.Did.String }}
    <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
    <span class="before:content-['·']"></span>
    {{ template "timestamp" . }}
    {{ $isCommentOwner := and .LoggedInUser (eq .LoggedInUser.Did .Comment.Did.String) }}
    {{ if not .Comment.Deleted }}
      <div class="ml-auto flex items-center gap-4 opacity-0 group-hover/comment:opacity-100">
        {{ if .LoggedInUser }}
          {{ template "repo/fragments/reactionsPopup" (dict "CommentRkey" (string .Comment.Rkey) "Scope" "header") }}
        {{ end }}
        {{ if $isCommentOwner }}
          {{ if not .Comment.IsLegacy }}
            {{ template "editCommentBtn" . }}
          {{ end }}
          {{ template "deleteCommentBtn" . }}
        {{ end }}
      </div>
    {{ end }}
  </div>
{{ end }}

{{ define "timestamp" }}
  <a href="#comment-{{ .Comment.Rkey }}"
     class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-400 hover:underline no-underline"
     id="comment-{{ .Comment.Rkey }}">
    {{ if .Comment.Deleted }}
      {{ template "repo/fragments/shortTimeAgo" .Comment.Deleted }}
    {{ else if .Comment.Edited }}
      Edited {{ template "repo/fragments/shortTimeAgo" .Comment.Edited }}
    {{ else }}
      {{ template "repo/fragments/shortTimeAgo" .Comment.Created }}
    {{ end }}
  </a>
{{ end }}

{{ define "editCommentBtn" }}
  <a
    class="text-gray-500 dark:text-gray-400 flex gap-1 items-center group cursor-pointer hover:no-underline no-underline"
    hx-get="/comment/edit?aturi={{ .Comment.AtUri }}"
  >
    {{ i "pencil" "size-4 inline group-[.htmx-request]:hidden" }}
    {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
  </a>
{{ end }}

{{ define "deleteCommentBtn" }}
  <a
    class="text-red-500 dark:text-red-400 hover:text-red-600 hover:dark:text-red-300 flex gap-1 items-center group cursor-pointer hover:no-underline no-underline"
    hx-delete="/comment?aturi={{ .Comment.AtUri }}"
    hx-confirm="Are you sure you want to delete your comment?"
  >
    {{ i "trash-2" "size-4 inline group-[.htmx-request]:hidden" }}
    {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
  </a>
{{ end }}