<div class="statuses" *ngFor="let category of categories">
  <p-checkbox [(ngModel)]="selectedCategories" value="{{category.value}}" (onChange)="onCheckAsync()"></p-checkbox>
  <span style="display: inline-block; vertical-align: middle; margin-left: 1em;">{{category.label}}</span>
</div>
<div class="white-box card-block scoring-card-block" *ngFor="let project of projects">
  <div class="row">
    <div class="main-info col-3">
      <img src="{{project.imageUrl}}"/>
      <div class="main-info__title">
        <span>{{project.title}}</span>
      </div>
    </div>
    <div class="col-9">
      <div class="row" style="padding-bottom: 3em;">
        <div class="description col-8">
          <span class="big-size {{scoreColorsService.getProjectStatusColor(project.statusCode)}}">{{ 'AdminScoringProject.Status' | translate }}: {{project.status}}</span>
          <span style="padding-right: 2em;" *ngFor="let areaExpert of project.areasExperts">{{areaExpert.area.name}}: {{areaExpert.acceptedCount}}/{{areaExpert.requiredCount}}</span>
        </div>
        <div class="col-4 text-right">
          <a *ngIf="project.statusCode !== ScoringProjectStatus.InProgress"
             class="main-btn button-link"
             (click)="relaunchAsync(project.projectExternalId)">
            {{ 'AdminScoringProject.Relaunch' | translate }}
          </a>
          <span *ngIf="project.statusCode === ScoringProjectStatus.InProgress" class="big-size high_rate">{{ 'AdminScoringProject.WaitExperts' | translate }} {{project.endDate}}</span>
        </div>
      </div>
      <div class="row">
        <div class="col-8">
          <span *ngIf="project.startDate !== ''" class="big-size medium_rate">{{ 'AdminScoringProject.StartDate' | translate }}: {{project.startDate}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
