<div fxLayout="row" id="search-container">
  <mat-label fxLayoutAlign="center center">
    <mat-icon class="search-icon">search</mat-icon>
  </mat-label>
  <input #searchBox placeholder="{{ 'comment-list.search' | translate }}"
         (input)="searchComments(searchBox.value)">
  <button mat-icon-button class="searchBarButton close" *ngIf="searchBox.value"
          (click)="hideCommentsList=false; searchBox.value=''">
    <mat-icon>close</mat-icon>
  </button>

  <span class="fill-remaining-space"></span>

  <div class="button-bar" fxLayoutAlign="center center">
    <div *ngIf="comments && comments.length > 0">
      <mat-chip-list>
        <mat-chip class="counter" *ngIf="comments && !hideCommentsList">{{comments.length}}</mat-chip>
        <mat-chip class="counter counter-filtered" *ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</mat-chip>
      </mat-chip-list>
    </div>

    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments && comments.length > 0"
            [matMenuTriggerFor]="filterMenu" matTooltip="{{ 'comment-list.filter-comments' | translate }}">
      <mat-icon class="searchBarIcon">filter_list</mat-icon>
    </button>

    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments && comments.length > 0"
            [matMenuTriggerFor]="sortMenu" matTooltip="{{ 'comment-list.sort-comments' | translate }}">
      <mat-icon class="searchBarIcon">sort</mat-icon>
    </button>

    <button mat-fab class="searchBarButton" *ngIf="!searchBox.value" (click)="openCreateDialog()"
            matTooltip="{{ 'comment-list.add-comment' | translate }}">
      <mat-icon class="addCommentIcon">add</mat-icon>
    </button>
  </div>

  <mat-menu #sortMenu="matMenu" xPosition="before">
      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(votedesc)">
        <mat-icon [ngClass]="{votedesc: 'up'}[currentSort]">keyboard_arrow_up</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(voteasc)">
        <mat-icon [ngClass]="{voteasc: 'down'}[currentSort]">keyboard_arrow_down</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(time)">
        <mat-icon [ngClass]="{time: 'unread-icon'}[currentSort]">access_time</mat-icon>
      </button>
  </mat-menu>

  <mat-menu #filterMenu="matMenu" xPosition="before">
    <div>
      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(correct)">
        <mat-icon [ngClass]="{correct: 'correct-icon'}[currentFilter]">check_circle</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(favorite)">
        <mat-icon [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">favorite</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(read)">
        <mat-icon [ngClass]="{read: 'read-icon'}[currentFilter]">visibility</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=true" (click)="filterComments(unread)">
        <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
      </button>

      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort); filterComments('')">
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </mat-menu>
</div>

<div *ngIf="!isLoading">
<app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
</div>

<div *ngIf="comments && comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
  <h4>{{ 'comment-page.no-comments' | translate }}</h4>
</div>