{{ 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"
  >
    {{ $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>
    {{ template "hats" $ }}
    <span class="before:content-['·']"></span>
    {{ template "timestamp" . }}
    {{ $isCommentOwner := and .LoggedInUser (eq .LoggedInUser.Did .Comment.Did.String) }}
    {{ if and $isCommentOwner (not .Comment.Deleted) }}
      {{ if not .Comment.IsLegacy }}
        {{ template "editCommentBtn" . }}
      {{ end }}
      {{ template "deleteCommentBtn" . }}
    {{ end }}
  </div>
{{ end }}

{{ define "hats" }}
  {{ $isIssueAuthor := eq .Comment.Did .Issue.Did }}
  {{ if $isIssueAuthor }}
    (author)
  {{ end }}
{{ 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"
    hx-get="/comment/edit?aturi={{ .Comment.AtUri }}"
  >
    {{ i "pencil" "size-3 inline group-[.htmx-request]:hidden" }}
    {{ i "loader-circle" "size-3 animate-spin hidden group-[.htmx-request]:inline" }}
  </a>
{{ end }}

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