<div class="comment-table">
  <table [nbTreeGrid]="dataSource">
    <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="columns"></tr>
    <tr nbTreeGridRow *nbTreeGridRowDef="let comment; columns: columns"
        class="comment-cell"
        fragment="{{comment.data['commentId']}}">
    </tr>
    <!-- Comment ID -->
    <ng-container [nbTreeGridColumnDef]="columns[0]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'comment.commentId' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let comment">
        {{ comment.data['commentId'] || '-' }}
      </td>
    </ng-container>
    <!-- Title -->
    <ng-container [nbTreeGridColumnDef]="columns[1]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'comment.title' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let comment">
        {{ comment.data['title'] }}
      </td>
    </ng-container>
    <!-- Description -->
    <ng-container [nbTreeGridColumnDef]="columns[2]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'comment.description' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let comment">
        {{ comment.data['description'] }}
      </td>
    </ng-container>
    <!-- Related Findings -->
    <ng-container [nbTreeGridColumnDef]="columns[3]">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
        {{ 'comment.relatedFindings' | translate }}
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let comment" class="related-finding-cell">
        <ng-container *ngIf="comment.data['relatedFindings'].length > 0; else NoRelatedFindings">
          <app-findig-widget [numberOfFindigs]="comment.data['relatedFindings'].length"></app-findig-widget>
        </ng-container>
        <ng-template #NoRelatedFindings>
          {{ 'comment.no.relatedFindings' | translate }}
        </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-comment-button"
                [disabled]="pentestInfo$.getValue().status === notStartedStatus"
                (click)="onClickAddComment()">
          <fa-icon [icon]="fa.faPlus" class="new-comment-icon"></fa-icon>
          {{'comment.add' | translate}}
        </button>
      </th>
      <td nbTreeGridCell *nbTreeGridCellDef="let comment" class="cell-actions">
        <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="1rem">
          <button nbButton
                  status="primary"
                  size="small"
                  (click)="onClickEditComment(comment)">
            <fa-icon [icon]="fa.faPencilAlt"></fa-icon>
          </button>
          <button nbButton
                  status="danger"
                  size="small"
                  (click)="onClickDeleteComment(comment)">
            <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">
    {{'comment.no.comments' | translate}}
  </p>
</div>

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