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

{{ define "commentListItem" }}
  {{ $root := index . 0 }}
  {{ $item := index . 1 }}

  <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"
      (dict
        "LoggedInUser"      $root.LoggedInUser
        "Reactions"         (index (asReactionMapMap $root.Reactions) $item.Self.FeedCommentAtUri)
        "UserReacted"       (index (asReactionStatusMapMap $root.UserReacted) $item.Self.FeedCommentAtUri)
        "VouchRelationship" (index $root.VouchRelationships $item.Self.Did)
        "Comment"           $item.Self) }}

    <div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700">
      {{ range $index, $reply := $item.Replies }}
        <div class="-ml-4">
          {{ template "replyComment"
            (dict
              "LoggedInUser"      $root.LoggedInUser
              "Reactions"         (index (asReactionMapMap $root.Reactions) $reply.FeedCommentAtUri)
              "UserReacted"       (index (asReactionStatusMapMap $root.UserReacted) $reply.FeedCommentAtUri)
              "VouchRelationship" (index $root.VouchRelationships $reply.Did)
              "Comment"           $reply) }}
        </div>
      {{ end }}
    </div>

    <div hx-include="this">
      <input name="subject-uri" type="hidden" value="{{ $item.Self.Subject.Uri }}">
      <input name="subject-cid" type="hidden" value="{{ $item.Self.Subject.Cid }}">
      <input name="reply-to-uri" type="hidden" value="{{ $item.Self.AtUri }}">
      <input name="reply-to-cid" type="hidden" value="{{ $item.Self.Cid }}">
      {{ template "fragments/comment/replyPlaceholder" (dict "LoggedInUser" $root.LoggedInUser) }}
    </div>
  </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.String "size-8 mr-1" .VouchRelationship) }}
  </div>
  <div class="flex-1 min-w-0">
    {{ template "fragments/comment/commentHeader" . }}
    {{ template "fragments/comment/commentBody" . }}
  </div>
</div>
{{ end }}

{{ define "replyComment" }}
<div class="py-4 pr-4 w-full mx-auto flex gap-2 ">
  <div class="flex-shrink-0">
    {{ template "user/fragments/picLink" (list .Comment.Did.String "size-8 mr-1" .VouchRelationship) }}
  </div>
  <div class="flex-1 min-w-0">
    {{ template "fragments/comment/commentHeader" . }}
    {{ template "fragments/comment/commentBody" . }}
  </div>
</div>
{{ end }}