<div class="content" *ngIf="project">
  <div class="row mx-auto">
    <h1 class="title">{{project.name}}</h1>
  </div>

  <p-table class="admin-table" class="admin-table" [value]="experts" [lazy]="true" (onLazyLoad)="updateExperts($event)"
           [paginator]="false"
           [rows]="10" [totalRecords]="totalRecords" [loading]="loading">
    <ng-template pTemplate="header" let-columns>
      <tr class="list-row list-row__header">
        <th class="list-item">{{ 'EditScoring.ActivatePrivateExpert' | translate }}</th>
        <th class="list-item" *ngFor="let area of areaTypes">{{ 'EditScoring.' + area | translate }}</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-expert let-columns="columns">
      <tr class="list-row">
        <td class="list-item">
          <mat-checkbox (change)="onExpertChecked($event, expert.id)"
                        [checked]="expertInScoring(expert.id)"></mat-checkbox>
          {{expert.firstName}}
          {{expert.secondName}}
        </td>
        <td class="list-item" [class.completed]="isCompleteArea(expert.id, +area)" *ngFor="let area of areaTypes">
          <mat-checkbox (change)="onAreaChecked($event, expert.id, +area)"
                        [checked]="areaInScoring(expert.id, +area)"
                        [disabled]="!expertHaveNoArea(expert.id, +area)"></mat-checkbox>
        </td>
      </tr>
    </ng-template>
  </p-table>

  <button mat-fab class="action-btn" *ngIf="canStart()" title="{{ 'EditScoring.StartScoring' | translate }}"
          (click)="startPrivateScoringAsync()">
    <mat-icon>play_arrow</mat-icon>
  </button>
  <button mat-fab class="action-btn" *ngIf="canEdit()" title="{{ 'EditScoring.UpdateExperts' | translate }}"
          (click)="setExpertsAsync()">
    <mat-icon>save</mat-icon>
  </button>
  <button mat-fab class="action-btn" *ngIf="canFinish()" title="{{ 'EditScoring.FinishScoring' | translate }}"
          (click)="finishPrivateScoringAsync()">
    <mat-icon>done</mat-icon>
  </button>
  <button mat-fab class="action-btn" *ngIf="canReopen()" title="{{ 'EditScoring.ReOpen' | translate }}"
          (click)="reopenPrivateScoringAsync()">
    <mat-icon>play_arrow</mat-icon>
  </button>
  <button mat-fab class="action-btn" title="{{ 'EditScoring.SeeProject' | translate }}"
          (click)="navigateToProjectReport()">
    <mat-icon>remove_red_eye</mat-icon>
  </button>
</div>
