<div>
  <div class="title-block">
    <h2>
      {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
    </h2>

    <my-feed class="me-1" [syndicationItems]="syndicationItems"></my-feed>

    <div ngbDropdown class="d-inline-block ms-auto dropdown-root">
      <button class="peertube-button tertiary-button" id="dropdown-sort-comments" ngbDropdownToggle i18n>
        SORT BY
      </button>

      <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
        <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
        <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
      </div>
    </div>
  </div>

  @if (commentsEnabled) {
    <my-video-comment-add
      [video]="video()"
      [videoPassword]="videoPassword()"
      [user]="user()"
      (commentCreated)="onCommentThreadCreated($event)"
      [textValue]="commentThreadRedraftValue"
    ></my-video-comment-add>

    @if (totalNotDeletedComments === 0 && comments.length === 0) {
      <div i18n>No comments.</div>
    }

    <div class="comment-threads" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
      <div>
        <div class="anchor" #commentHighlightBlock id="highlighted-comment"></div>
        @if (highlightedThread) {
          <my-video-comment
            [comment]="highlightedThread"
            [video]="video()"
            [videoPassword]="videoPassword()"
            [inReplyToCommentId]="inReplyToCommentId"
            [commentTree]="threadComments[highlightedThread.id]"
            [highlightedComment]="true"
            [firstInThread]="true"
            (wantedToReply)="onWantedToReply($event)"
            (wantedToDelete)="onWantedToDelete($event)"
            (wantedToRedraft)="onWantedToRedraft($event)"
            (wantedToApprove)="onWantToApprove($event)"
            (threadCreated)="onThreadCreated($event)"
            (resetReply)="onResetReply()"
            (timestampClicked)="handleTimestampClicked($event)"
            [redraftValue]="commentReplyRedraftValue"
          ></my-video-comment>
        }
      </div>

      @for (comment of comments; track comment; let i = $index) {
        <div>
          @if (!highlightedThread || comment.id !== highlightedThread.id) {
            <my-video-comment
              [comment]="comment"
              [video]="video()"
              [videoPassword]="videoPassword()"
              [inReplyToCommentId]="inReplyToCommentId"
              [commentTree]="threadComments[comment.id]"
              [firstInThread]="i + 1 !== comments.length"
              (wantedToReply)="onWantedToReply($event)"
              (wantedToDelete)="onWantedToDelete($event)"
              (wantedToRedraft)="onWantedToRedraft($event)"
              (wantedToApprove)="onWantToApprove($event)"
              (threadCreated)="onThreadCreated($event)"
              (resetReply)="onResetReply()"
              (timestampClicked)="handleTimestampClicked($event)"
              [redraftValue]="commentReplyRedraftValue"
              >
              @if (comment.totalReplies !== 0 && !threadComments[comment.id]) {
                <button (click)="viewReplies(comment.id)" class="view-replies mb-2 button-unstyle">
                  <span class="chevron-down"></span>
                  @if (comment.totalRepliesFromVideoAuthor > 0) {
                    @if (comment.totalReplies !== comment.totalRepliesFromVideoAuthor) {
                      <ng-container i18n>
                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video()?.account?.displayName || 'the author' }} and others
              </ng-container>
                    } @else {
                      <ng-container i18n>
                View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} from {{ video()?.account?.displayName || 'the author' }}
              </ng-container>
                    }
                  } @else {
                    <ng-container i18n>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-container>
                  }
                  <my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
                </button>
              }
            </my-video-comment>
          }
        </div>
      }
    </div>
  } @else {
    <div i18n>Comments are disabled.</div>
  }
</div>
