<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>
    <!-- Title -->
    <ng-container [nbTreeGridColumnDef]="columns[0]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'finding.title' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding">
        <span *ngIf=" finding.data['title'].length < 200; else cutTitle">
          {{ finding.data['title'] }}
        </span>
        <ng-template #cutTitle>
          {{ finding.data['title'].slice(0, 200) + '...' }}
        </ng-template>
      </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">
        <div fxLayoutAlign="center center">
          <app-severity-tag [currentSeverity]="finding.data['severity']"></app-severity-tag>
        </div>
      </td>
    </ng-container>
    <!-- Description -->
    <ng-container [nbTreeGridColumnDef]="columns[2]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'finding.description' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding">
        <span *ngIf=" finding.data['description'].length < 200; else cutDescription">
          {{ finding.data['description'] }}
        </span>
        <ng-template #cutDescription>
          {{ finding.data['description'].slice(0, 200) + '...' }}
        </ng-template>
      </td>
    </ng-container>
    <!-- Impact -->
    <ng-container [nbTreeGridColumnDef]="columns[3]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'finding.impact' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let finding">
        <span *ngIf=" finding.data['impact'].length < 200; else cutImpact">
          {{ finding.data['impact'] }}
        </span>
        <ng-template #cutImpact>
          {{ finding.data['impact'].slice(0, 200) + '...' }}
        </ng-template>
      </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 !== inProgressStatus"
                (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>
