<div fxFlex="0 1 max-content" fxLayout="column" class="pentest-overview">
  <nb-layout fxFlex>
    <!--Header-->
    <nb-layout-header class="pentest-overview-header">
      <div fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="space-between center">
        <!--Filter-->
        <div fxLayout="row" fxLayoutGap="1rem" class="header-filer">
          <!--Actions-->
          <form class="project-filter-input">
            <nb-form-field>
              <fa-icon nbPrefix class="search-prefix-icon" [icon]="fa.faSearch"></fa-icon>
              <input type="text"
                     fullWidth nbInput
                     class="search-field"
                     [formControl]="projectSearch"
                     placeholder="{{ 'project.filter.placeholder' | translate: this.allProjectsCount$?.getValue() }}"
                     status="basic"
                     shape="semi-round"
                     fieldSize="medium">
            </nb-form-field>
          </form>
          <!--ToDo: Add dropdown to filter for specific state-->
          <button nbButton
                  status="danger"
                  outline
                  size="medium"
                  shape="semi-round"
                  class="reset-filter-btn"
                  [disabled]="projectSearch.value === ''"
                  (click)="onClickResetFilter()">
            <fa-icon [icon]="fa.faFilterCircleXmark" class="btn-icon"></fa-icon>
            {{'global.action.reset' | translate}}
          </button>
        </div>
        <!--Button-->
        <div class="header-project-button">
          <button nbButton hero
                  status="info"
                  size="medium"
                  shape="round"
                  class="add-project-button"
                  (click)="onClickAddProject()">
            <fa-icon [icon]="fa.faPlus" class="btn-icon"></fa-icon>
            {{'project.overview.add.project' | translate}}
          </button>
        </div>
      </div>
    </nb-layout-header>
    <!--Column-->
    <!--ToDo: Fix the column style for multiple projects in css-->
    <nb-layout-column class="pentest-overview-column">
      <div class="project-grid">
        <div class="project" *ngFor="let project of projects$ | async">
          <app-project-widget [project]="project"></app-project-widget>
        </div>
      </div>
      <!--Error Text-->
      <div *ngIf="projects$.getValue() == null || projects$.getValue().length === 0 && loading$.getValue() === false"
           fxLayout="row" fxLayoutAlign="center center">
        <p class="error-text">
          {{'project.overview.no.projects' | translate}}
        </p>
      </div>
      <!--Loading Spinner-->
      <app-loading-spinner [isLoading$]="isLoading()" *ngIf="isLoading() | async"></app-loading-spinner>
    </nb-layout-column>
  </nb-layout>
</div>
