<div class="finding-table">
  <table [nbTreeGrid]="dataSource">
    <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="columns"></tr>
    <tr nbTreeGridRow *nbTreeGridRowDef="let finding; columns: columns"
        class="finding-cell"
        fragment="{{finding.data['findingId']}}">
    </tr>
    <!-- Finding ID -->
    <ng-container [nbTreeGridColumnDef]="columns[0]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'finding.findingId' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding">
        {{ finding.data['findingId'] || '-' }}
      </td>
    </ng-container>
    <!-- Severity -->
    <ng-container [nbTreeGridColumnDef]="columns[1]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef class="cell-severity">
        {{ 'finding.severity' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding" class="cell-severity border-style" fxLayoutAlign="center center">
        <ng-container>
          <app-severity-tag [currentSeverity]="finding.data['severity']"></app-severity-tag>
        </ng-container>
      </td>
    </ng-container>
    <!-- Title -->
    <ng-container [nbTreeGridColumnDef]="columns[2]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'finding.title' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding">
        {{ finding.data['title'] }}
      </td>
    </ng-container>
    <!-- Impact -->
    <ng-container [nbTreeGridColumnDef]="columns[3]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'finding.impact' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding">
        {{ finding.data['impact'] }}
      </td>
    </ng-container>
    <!-- Actions -->
    <ng-container [nbTreeGridColumnDef]="columns[4]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef class="cell-actions">
        <button nbButton hero
                status="info"
                size="small"
                shape="round"
                class="add-finding-button"
                [disabled]="pentestInfo$.getValue().status === notStartedStatus"
                (click)="onClickAddFinding()">
          <fa-icon [icon]="fa.faPlus" class="new-finding-icon"></fa-icon>
          {{'finding.add' | translate}}
        </button>
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding" class="cell-actions">
        <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="1rem">
          <button nbButton
                  status="primary"
                  size="small"
                  (click)="onClickEditFinding(finding)">
            <fa-icon [icon]="fa.faPencilAlt"></fa-icon>
          </button>
          <button nbButton
                  status="danger"
                  size="small"
                  (click)="onClickDeleteFinding(finding)">
            <fa-icon [icon]="fa.faTrash"></fa-icon>
          </button>
        </div>
      </td>
    </ng-container>
  </table>
</div>

<div *ngIf="data.length === 0 && loading$.getValue() === false" fxLayout="row" fxLayoutAlign="center center">
  <p class="error-text">
    {{'finding.no.findings' | translate}}
  </p>
</div>

<app-loading-spinner [isLoading$]="isLoading()" *ngIf="isLoading() | async"></app-loading-spinner>
