<mat-toolbar class="mat-elevation-z4">
  <mat-toolbar-row>
    <button mat-icon-button *ngIf="router.url !== '/home'" (click)="goBack()"
            matTooltip="{{'header.back' | translate}}">
      <mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
    </button>
    <span class="fill-remaining-space"></span>
    <h3 *ngIf="router.url.includes('comments') && user.role === 1 && deviceType === 'desktop'" fxLayoutAlign="center center">
      <mat-icon>access_time</mat-icon>
      {{cTime}}
    </h3>
    <span class="fill-remaining-space"
          *ngIf="router.url.includes('comments')"></span>
    <h3 *ngIf="router.url.includes('comments')" fxLayoutAlign="center center">
      {{'header.id' | translate}}: {{ shortId.slice(0,4) }} {{  shortId.slice(4,8) }}
    </h3>
    <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" matTooltip="{{ 'header.bright' | translate }}">lens</mat-icon>
            <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</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" matTooltip="{{ 'header.dark' | translate }}">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" matTooltip="{{ 'header.beamer' | translate }}">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" matTooltip="{{ 'header.wai' | translate }}">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-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="themeMenu">
      <div class="label-icon">
        <mat-icon aria-label="Example" class="header-icons">palette</mat-icon>
        <h3>{{'header.style' | translate}}</h3>
      </div>
    </button>

    <button mat-icon-button *ngIf="deviceType === 'mobile'" [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-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="langMenu">
      <div class="label-icon">
        <mat-icon class="header-icons">language</mat-icon>
        <h3>{{'header.language' | translate}}</h3>
      </div>
    </button>

    <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="langMenu">
      <mat-icon class="header-icons">language</mat-icon>
    </button>

    <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item *ngIf="user" routerLink="/user">
        <mat-icon class="sessions">work</mat-icon>
        <span>{{'header.my-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 #loginMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item (click)=login(false)>
        <mat-icon>supervisor_account</mat-icon>
        <span>{{ 'login-page.login' | translate }}</span>
      </button>
    </mat-menu>

    <button mat-button *ngIf="user && deviceType === 'desktop'" [matMenuTriggerFor]="userMenu">
      <div class="label-icon">
        <mat-icon class="header-icons">account_box</mat-icon>
        <h3>{{'header.my-account' | translate}}</h3>
      </div>
    </button>

    <button mat-icon-button *ngIf="user && deviceType === 'mobile'" [matMenuTriggerFor]="userMenu">
      <mat-icon class="header-icons">account_box</mat-icon>
    </button>

    <button mat-button *ngIf="!user && deviceType === 'desktop'" [matMenuTriggerFor]="loginMenu">
      <div class="label-icon">
        <mat-icon class="header-icons">account_box</mat-icon>
        <h3 *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h3>
      </div>
    </button>

    <button mat-icon-button *ngIf="!user && deviceType === 'mobile'" [matMenuTriggerFor]="loginMenu">
      <mat-icon class="header-icons">account_box</mat-icon>
    </button>

  </mat-toolbar-row>
</mat-toolbar>