<div #commentRef class="commentList">
  <div class="header">
    <div class="comment_title" i18n>User Comments</div>
    <div class="tabs">
      <div class="tab" *ngIf="appVersion" [class.active]="select === CommentType.News"
        (click)="selectChange(CommentType.News)">
        <ng-container i18n>Current Version</ng-container>
      </div>
      <span>/</span>
      <div class="tab" [class.active]="select === CommentType.History || !appVersion" (click)="selectChange(CommentType.History)">
        <ng-container i18n>History Versions</ng-container>
      </div>
    </div>
  </div>
  <br />
  <div class="body" [class.loading]="loading" >
    <div class="app_wait" *ngIf="loading">
      <app-wait></app-wait>
    </div>
    <ng-container [ngSwitch]="true">
      <div class="empty error" *ngSwitchCase="!list">
        <ng-container i18n>Failed to load comments</ng-container>
      </div>
      <div class="empty" *ngSwitchCase="list&&list.get(select)?.length === 0">
        <ng-container i18n>No user comments available</ng-container>
      </div>
      <ng-container *ngSwitchCase="list&&list.get(select)?.length > 0">
        <ng-container *ngFor="let c of list.get(select); first as first">
          <div [@myComment]="haveNewComment && first && c.commenter === info?.uid ? 'in' : ''" class="comment_item">
            <div class="img">
              <img [src]="c.commenterInfo?.profile_image" #avatarRef
                (error)="avatarRef.src = '/assets/images/default_avatar.jpeg?default'" class="profile" />
            </div>
            <div class="comment_context">
              <div class="comment_head">
                <div>
                  <ng-container *ngIf="c.commenterInfo as userInfo; else deepinInfoDefault">
                    <div class="name">
                      {{userInfo.nickname}}
                      <span *ngIf="info?.uid === c.commenter" class="my_tag" i18n>My Comment</span>
                    </div>
                    <div class="star">
                      <dstore-star [rate]="c.score"></dstore-star>
                      <span>{{ c.score }}</span>
                    </div>
                  </ng-container>
                </div>
                <ng-template #deepinInfoDefault>
                  <span i18n>[Closed Account]</span>
                  <div class="star">
                    <dstore-star [rate]="c.score"></dstore-star>
                    <span>{{ c.score }}</span>
                  </div>
                </ng-template>
                <div class="time">
                  {{c.created_at | date: 'yyyy-MM-dd HH:mm:ss'}}
                </div>
              </div>
              <div class="comment_body">{{c.content}}</div>
              <div class="comment_reply" *ngIf="c.reply">
                <span class="reply-head" i18n> [Developer reply]</span>
                <span class="replay-content">{{c.reply.context}}</span>
              </div>
              <div class="comment_bottom">
                <div class="tags">
                  <!-- <ng-container *ngIf="c.tags?.length" >
                    <span i18n>Tags:</span>
                  </ng-container>
                  <span class="tag" *ngFor="let tag of c.tags" >{{tag.tag}}</span> -->
                </div>
                <ng-container>
                  <div class="like">
                    <ng-container *ngIf="supportSignIn">
                      <ng-container *ngIf="info?.uid!=c.commenter">
                        <img class="thumbUp" [class.active]="likeByMe(c.likes, info?.uid)" 
                        (click)="thumbUpClick(c)" />
                        <span>{{c.likes?.length||0}}</span>
                      </ng-container>
                    </ng-container>
                  </div>
                </ng-container>
              </div>
            </div>
          </div>
        </ng-container>
      </ng-container>
    </ng-container>
  </div>
  <div class="bottom" *ngIf="!loading">
    <a (click)="scrollToTop()" i18n>Back to top</a>
    <app-paginator *ngIf="total[select] > pageSize" [pageIndex]="page[select]" [length]="total[select]" [size]="pageSize" (pageIndexChange)="pageChange($event)"></app-paginator>
  </div>
</div>