<div class="pentest-header" fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="space-between center">
  <div class="back-button-container">
    <button nbButton
            shape="round"
            title="{{ 'global.action.return' | translate }}"
            (click)="onClickRouteBack()">
      <fa-icon [icon]="fa.faLongArrowAltLeft"
               class="back-element-icon fa-lg"></fa-icon>
    </button>
  </div>

  <div class="header-info" fxLayout="row" fxLayoutGap="4rem" fxLayoutAlign="space-between center">
    <app-report-state-tag class="state-tag"
                          [currentReportState]="selectedProject$.getValue()?.state"></app-report-state-tag>
    <h4 class="project-title">{{selectedProject$.getValue().title}}</h4>
    <app-version-tag [version]="selectedProject$.getValue().version"></app-version-tag>
  </div>

  <div class="button-container">
    <!--Actions for normal view-->
    <nb-actions size="medium" fxHide.lt-lg>
      <nb-action>
        <button nbButton
                status="primary"
                shape="round"
                (click)="onClickEditPentestProject()">
          <fa-icon [icon]="fa.faEdit"
                   class="element-icon fa-lg"></fa-icon>
        </button>
      </nb-action>
      <nb-action>
        <button nbButton hero
                status="info"
                shape="round"
                (click)="onClickGeneratePentestReport()">
          <fa-icon [icon]="fa.faFileAlt"
                   class="element-icon fa-lg"></fa-icon>
          <span class="element-text">{{ 'global.action.report' | translate }}</span>
        </button>
      </nb-action>
    </nb-actions>
    <!--Actions for mobile devices-->
    <nb-actions size="medium" fxHide fxShow.lt-lg>
      <nb-action>
        <nb-user [nbContextMenu]="objectiveActionItems" shape="rectangle" [picture]="BARS_IMG" name="" [onlyPicture]></nb-user>
      </nb-action>
    </nb-actions>
  </div>
</div>
