<div *ngIf="reportData" class="task-priority-report">

  <!-- HEADER -->
  <div class="task-priority-report__header">
    <h4 class="task-priority-report__headline"> {{reportData?.meta.name}} ({{reportData?.meta.date | germanTimeFormat }}) </h4>
    <taskana-monitor-task-priority-report-filter (applyFilter)="applyFilter($event)"> </taskana-monitor-task-priority-report-filter>
  </div>

  <mat-divider class="task-priority-report__divider"> </mat-divider>

  <div *ngIf="reportData?.rows.length == 0"> Could not find any tasks which fulfill the current filter criteria. </div>

  <div class="task-priority-report__workbaskets">
    <div *ngFor="let row of reportData?.rows; let i = index" class="task-priority-report__workbasket">

      <!-- WORKBASKET NAME -->
      <div class="task-priority-report__workbasket-headline">
        <h6> {{row.desc[0]}} </h6>
      </div>

      <!-- CHART -->
      <taskana-monitor-canvas [row]="row" [id]="indexToString(i)"> </taskana-monitor-canvas>

      <!-- TABLE -->
      <div>
        <table mat-table [dataSource]="tableDataArray[i]">

          <!-- Column: Priority -->
          <ng-container matColumnDef="priority">
            <th mat-header-cell *matHeaderCellDef> Priority </th>
            <td mat-cell *matCellDef="let element" [ngClass]="{
           'task-priority-report__row--high': element.priority == nameHighPriority,
           'task-priority-report__row--medium': element.priority == nameMediumPriority,
           'task-priority-report__row--low': element.priority == nameLowPriority}">
              {{element.priority}} </td>
          </ng-container>

          <!-- Column: Number of Tasks -->
          <ng-container matColumnDef="number">
            <th mat-header-cell *matHeaderCellDef> Number of Tasks </th>
            <td mat-cell *matCellDef="let element" [ngClass]="{
           'task-priority-report__row--high': element.priority == nameHighPriority,
           'task-priority-report__row--medium': element.priority == nameMediumPriority,
           'task-priority-report__row--low': element.priority == nameLowPriority}">
              {{element.number}} </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="columns"></tr>
          <tr mat-row *matRowDef="let row; columns: columns;">
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
