<mat-toolbar class="mat-elevation-z6">
  <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 class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
      <mat-grid-list cols="2">
        <mat-grid-tile>
          <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
            <mat-icon class="color-icon">
              lens
              <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
            </mat-icon>
          </button>
        </mat-grid-tile>
        <mat-grid-tile>
          <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
            <mat-icon class="color-icon">lens</mat-icon>
            <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
          </button>
        </mat-grid-tile>
        <mat-grid-tile>
          <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
            <mat-icon class="color-icon">lens</mat-icon>
            <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
          </button>
        </mat-grid-tile>
        <mat-grid-tile>
          <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
            <mat-icon class="color-icon">lens</mat-icon>
            <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
          </button>
        </mat-grid-tile>
      </mat-grid-list>
    </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>