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

  <div class="header-info" fxLayout="row" fxHide.lt-lg>
    <span class="project-title">{{selectedProjectTitle$.getValue()}}</span>
    <span class="pentest-ref">{{" / " + pentest$.getValue().refNumber}}</span>
  </div>
  <div class="header-info-mobile" fxHide fxShow.lt-lg>
    <span class="pentest-ref">{{pentest$.getValue().refNumber}}</span>
  </div>

  <div class="pentest-status-container" fxLayout="row" fxLayoutGap="2.5rem" fxLayoutAlign="end center">
    <!-- Pentest Timer-->
    <div class="timer-component">
      <app-timer></app-timer>
    </div>
    <!-- Complete Pentest -->
    <div>
      <button nbButton
              class="complete-pentest-button"
              status="success"
              [disabled]="!pentestStatusChanged() || !pentestHasFindingsOrComments()"
              title="{{ 'global.action.save' | translate }}"
              (click)="onClickCompletePentest()">
        <fa-icon [icon]="fa.faSquare"></fa-icon>
        <span class="action-element-text"> {{ 'global.action.complete' | translate }} </span>
      </button>
    </div>
  </div>
</div>

