<div class="header" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2rem">
  <img *ngIf="currentTheme === 'corporate', else changeImage"
       src="../../assets/images/favicons/favicon.ico" alt="logo dark" class="header-icon" width="60rem" height="60rem">
  <ng-template #changeImage>
    <img src="../../assets/images/favicons/favicon_corporate.ico" alt="logo light" class="header-icon" width="60rem"
         height="60rem">
  </ng-template>

  <div class="logo-container">
    <h1>{{SECURITYC4PO_TITLE}} </h1>
  </div>
  <div class="filler"></div>
  <div fxLayoutGap="4rem">
    <nb-actions size="medium">
      <!--Info Action-->
      <nb-action>
        <fa-icon title="Info" [icon]="fa.faCircleInfo" (click)="onClickShowInfo()" class="action-element-icon fa-2x">
        </fa-icon>
      </nb-action>
      <!--OWASP Action-->
      <nb-action>
        <fa-icon title="OWASP Testing Guide"
                 (click)="onClickGoToLink('https://owasp.org/www-project-web-security-testing-guide/v42/')"
                 [icon]="fa.faFileInvoice" class="action-element-icon fa-2x">
        </fa-icon>
      </nb-action>
      <!--Theme Action-->
      <nb-action>
        <div (click)="onClickSwitchTheme()" class="action-element-icon">
          <fa-icon *ngIf="currentTheme === 'corporate', else changeIcon"
                   title="Darktheme" [icon]="fa.faMoon" class="fa-2x">
          </fa-icon>
          <ng-template #changeIcon>
            <fa-icon title="Lighttheme" [icon]="fa.faSun" class="fa-2x"></fa-icon>
          </ng-template>
        </div>
      </nb-action>
      <!--User Action-->
      <nb-action class="user-action">
        <nb-user [nbContextMenu]="userMenu"
                 [picture]="FALLBACK_IMG"
                 name="{{user?.getValue()?.username}}"
                 title="Pentester">
        </nb-user>
      </nb-action>
    </nb-actions>
  </div>
</div>

