{{ define "repo/issues/fragments/issueComment" }}
  {{ with .Comment }}
  <div id="comment-container-{{.CommentId}}">
    <div class="flex items-center gap-2 mb-2 text-gray-500 dark:text-gray-400 text-sm">
      {{ $owner := index $.DidHandleMap .OwnerDid }}
      <a href="/{{ $owner }}" class="no-underline hover:underline">{{ $owner }}</a>

     <span class="before:content-['·']"></span>
      <a
          href="#{{ .CommentId }}"
          class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-400 hover:underline no-underline"
          id="{{ .CommentId }}">
        {{ if .Deleted }}
          deleted {{ .Deleted | timeFmt }}
        {{ else if .Edited }}
          edited {{ .Edited | timeFmt }}
        {{ else }}
          {{ .Created | timeFmt }}
        {{ end }}
      </a>
      
      <!-- show user "hats" -->
      {{ $isIssueAuthor := eq .OwnerDid $.Issue.OwnerDid }}
      {{ if $isIssueAuthor }}
      <span class="text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 mx-1/2 inline-flex items-center">
        author
      </span>
      {{ end }}

      {{ $isCommentOwner := and $.LoggedInUser (eq $.LoggedInUser.Did .OwnerDid) }}
      {{ if and $isCommentOwner (not .Deleted) }}
      <button 
        class="btn px-2 py-1 text-sm" 
        hx-get="/{{ $.RepoInfo.FullName }}/issues/{{ .Issue }}/comment/{{ .CommentId }}/edit"
        hx-swap="outerHTML"
        hx-target="#comment-container-{{.CommentId}}"
        >
        {{ i "pencil" "w-4 h-4" }}
      </button>
      <button 
        class="btn px-2 py-1 text-sm text-red-500"
        hx-delete="/{{ $.RepoInfo.FullName }}/issues/{{ .Issue }}/comment/{{ .CommentId }}/"
        hx-confirm="Are you sure you want to delete your comment?"
        hx-swap="outerHTML"
        hx-target="#comment-container-{{.CommentId}}"
        >
        {{ i "trash-2" "w-4 h-4" }}
      </button>
      {{ end }}

    </div>
    {{ if not .Deleted }}
    <div class="prose dark:prose-invert">
      {{ .Body | markdown }}
    </div>
    {{ end }}
  </div>
  {{ end }}
{{ end }}