<mat-toolbar>
  <mat-toolbar-row>
    <button *ngIf="router.url !== '/home'" (click)="goBack()" mat-icon-button>
      <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
    </button>
    <span class="fill-remaining-space"></span>
    <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
    <span class="fill-remaining-space"></span>

    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item (click)="changeTheme('')">{{ 'header.default' | translate }}</button>
      <button mat-menu-item (click)="changeTheme('dark')">{{ 'header.dark' | translate }}</button>
    </mat-menu>

    <button mat-icon-button [matMenuTriggerFor]="themeMenu">
      <mat-icon class="header-icons">palette</mat-icon>
    </button>

    <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item (click)="useLanguage('de')">{{ 'header.german' | translate }}</button>
      <button mat-menu-item (click)="useLanguage('en')">{{ 'header.english' | translate }}</button>
    </mat-menu>

    <button mat-icon-button [matMenuTriggerFor]="langMenu">
      <mat-icon class="header-icons">language</mat-icon>
    </button>

    <mat-menu #loginMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item *ngIf="user && user.role === 1" routerLink="/creator">
        <mat-icon color="primary">style</mat-icon>
        <span>{{'header.my-sessions' | translate}}</span>
      </button>
      <button mat-menu-item *ngIf="user && user.role === 0" routerLink="/participant">
        <mat-icon color="primary">turned_in</mat-icon>
        <span>{{'header.visited-sessions' | translate}}</span>
      </button>
      <button mat-menu-item  (click)="logout()">
        <mat-icon color="warn">exit_to_app</mat-icon>
        <span>{{ 'header.logout' | translate }}</span>
      </button>
    </mat-menu>

    <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
        <button mat-menu-item (click)=login(true)>
          <mat-icon color="primary">record_voice_over</mat-icon>
          <span>{{ 'login-page.creator' | translate }}</span>
        </button>
        <button mat-menu-item (click)=login(false)>
          <mat-icon color="primary">supervisor_account</mat-icon>
          <span>{{ 'login-page.participant' | translate }}</span>
        </button>
    </mat-menu>

    <button mat-icon-button *ngIf="!user" [matMenuTriggerFor]="userMenu">
      <mat-icon class="header-icons">account_box</mat-icon>
    </button>
    <button mat-icon-button *ngIf="user" [matMenuTriggerFor]="loginMenu">
      <mat-icon class="header-icons">account_box</mat-icon>
    </button>
  </mat-toolbar-row>
</mat-toolbar>