<div class="statuses" *ngFor="let status of statuses">
  <p-checkbox [(ngModel)]="selectedStatuses" value="{{status.value}}" (onChange)="onCheckAsync()"></p-checkbox>
  <span style="display: inline-block; vertical-align: middle; margin-left: 1em;">{{status.label}}</span>
</div>

<p-table class="admin-table" [value]="projects" [lazy]="true" (onLazyLoad)="updateProjects($event)" [paginator]="true"
         [rows]="pageSize" [totalRecords]="totalRecords" [loading]="loading">
  <ng-template pTemplate="header" let-columns>
    <tr class="list-row list-row__header">
      <th class="list-item">{{ 'AdminProjects.ProjectName' | translate }}</th>
      <th class="list-item">{{ 'AdminProjects.CreateDate' | translate }}</th>
      <th class="list-item">{{ 'AdminProjects.Status' | translate }}</th>
      <th class="list-item">{{ 'AdminProjects.Actions' | translate }}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-project let-columns="columns">
    <tr class="list-row">
      <td class="list-item">
        {{project.name}}
      </td>
      <td *ngIf="project.scoring != null" class="list-item">
        {{project.scoring.creationDate | formatDate}}
      </td>
      <td *ngIf="project.scoring == null" class="list-item">
        -
      </td>
      <td class="list-item" [ngSwitch]="getScoringStatus(project)">
        <span *ngSwitchCase="ScoringStatus.FillingApplication || ScoringStatus.ReadyForPayment">{{ 'AdminProjects.New' | translate }}</span>
        <a *ngSwitchCase="ScoringStatus.PaymentInProcess" target="_blank"
           [href]="getScoringStartTransactionUrl(project)">
          {{ 'MyProject.PaymentInProgress' | translate }}
        </a>
        <a *ngSwitchCase="ScoringStatus.PaymentFailed" target="_blank" [href]="getScoringStartTransactionUrl(project)"
           class="failed">
          {{ 'MyProject.PaymentFailed' | translate }}
        </a>
        <span *ngSwitchCase="ScoringStatus.InProgress">{{ 'AdminProjects.InProgress' | translate }}</span>
        <span *ngSwitchCase="ScoringStatus.Finished">{{ 'AdminProjects.Finished' | translate }}</span>
      </td>
      <td class="list-item">
        <span (click)="navigateToEditScoring(project.id)" class="edit-icon"
              title="{{ 'AdminProjects.Edit' | translate }}"></span>
        <span (click)="navigateToProject(project.id)" class="view-project-icon"
              title="{{ 'AdminProjects.View' | translate }}">
          <mat-icon>remove_red_eye</mat-icon>
        </span>
      </td>
    </tr>
  </ng-template>
</p-table>
