{{ define "repo/issues/fragments/commentList" }}
  <div class="flex flex-col gap-4">
    {{ range $item := .CommentList }}
      {{ template "commentListing" (list $ .) }}
    {{ end }}
  </div>
{{ end }}

{{ define "commentListing" }}
  {{ $root := index . 0 }}
  {{ $comment := index . 1 }}
  {{ $params :=
        (dict
          "RepoInfo" $root.RepoInfo
          "LoggedInUser" $root.LoggedInUser
          "Issue" $root.Issue
          "Comment" $comment.Self) }}

  <div class="rounded border border-gray-200 dark:border-gray-700 w-full overflow-hidden shadow-sm bg-gray-50 dark:bg-gray-800/50">
    {{ template "topLevelComment" $params }}

    <div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700">
      {{ range $index, $reply := $comment.Replies }}
        <div class="-ml-4">
          {{
            template "replyComment"
            (dict
              "RepoInfo" $root.RepoInfo
              "LoggedInUser" $root.LoggedInUser
              "Issue" $root.Issue
              "Comment" $reply)
          }}
        </div>
      {{ end }}
    </div>

    {{ template "repo/issues/fragments/replyIssueCommentPlaceholder" $params }}
  </div>
{{ end }}

{{ define "topLevelComment" }}
<div class="rounded px-6 py-4 bg-white dark:bg-gray-800 flex gap-2 ">
  <div class="flex-shrink-0">
    {{ template "user/fragments/picLink" (list .Comment.Did "size-8 mr-1") }}
  </div>
  <div class="flex-1 min-w-0">
    {{ template "repo/issues/fragments/issueCommentHeader" . }}
    {{ template "repo/issues/fragments/issueCommentBody" . }}
  </div>
</div>
{{ end }}

{{ define "replyComment" }}
<div class="py-4 pr-4 w-full mx-auto overflow-hidden flex gap-2 ">
  <div class="flex-shrink-0">
    {{ template "user/fragments/picLink" (list .Comment.Did "size-8 mr-1") }}
  </div>
  <div class="flex-1 min-w-0">
    {{ template "repo/issues/fragments/issueCommentHeader" . }}
    {{ template "repo/issues/fragments/issueCommentBody" . }}
  </div>
</div>
{{ end }}