<mat-toolbar color="primary">
  @if (authenticated) {
  <a href="javascript:" mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </a>
  }
  <a class="main" routerLink="/">
    <img class="logo margin" src="assets/images/logo.png">
    <span class="hide-small">{{'buntspecht' | i18n}}</span>
  </a>
  <span class="spacer"></span>
  @if (authenticated) {
  <a class="margin" routerLink="/create" mat-raised-button color="accent">
    <mat-icon>edit</mat-icon>
    <span class="hide-small">{{'turnover.create' | i18n}}</span>
  </a>
  }
  <ng-container>
    <button mat-button [matMenuTriggerFor]="menu">
      <mat-icon>settings</mat-icon>
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      @if (authenticated) {
      <a mat-menu-item disabled>{{'profile.hello' | i18n:username}}</a>
      <mat-divider></mat-divider>
      }
      <ng-container *ngIf="locales.length > 1">
        <a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">
          <mat-icon *ngIf="locale == currentLocale">done</mat-icon>{{'locale.' + locale + '.long' |
          i18n}}
        </a>
      </ng-container>
      <a mat-menu-item (click)="toggleDarkTheme()">
        <mat-slide-toggle [checked]="darkTheme">
          {{'darkTheme' | i18n}}
        </mat-slide-toggle>
      </a>
      <mat-divider></mat-divider>
      @if (authenticated) {
      <a routerLink="/profile" routerLinkActive="active" mat-menu-item>
        <mat-icon>tune</mat-icon> {{'profile' | i18n}}
      </a>
      <a routerLink="/password" routerLinkActive="active" mat-menu-item>
        <mat-icon>lock</mat-icon> {{'password' | i18n}}
      </a>
      <mat-divider></mat-divider>
      <a (click)="logout()" mat-menu-item>
        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
      </a>
      }
      @if (!authenticated) {
      <a routerLink="/login" routerLinkActive="active" mat-menu-item>
        <mat-icon>login</mat-icon> {{'login' | i18n}}
      </a>
      }
    </mat-menu>
  </ng-container>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [opened]="opened" [autoFocus]="false"
    (click)="!isBiggerScreen() && this.close()">
    @if (authenticated) {
    <mat-nav-list>
      <a routerLink="" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
        <mat-icon matListItemIcon>receipt</mat-icon>
        <span>{{(admin ? 'turnovers.mine' : 'turnovers') | i18n}}</span>
      </a>
      @if(admin) {
      <mat-divider></mat-divider>
      <a routerLink="m" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
        <mat-icon matListItemIcon>insert_chart_outlined</mat-icon>
        <span>{{'management' | i18n}}</span>
      </a>
      <a routerLink="t" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
        <mat-icon matListItemIcon>receipt_long</mat-icon>
        <span>{{'turnovers' | i18n}}</span>
      </a>
      <mat-divider></mat-divider>
      <a routerLink="u" routerLinkActive="active" mat-list-item (click)="!isBiggerScreen() && this.close()">
        <mat-icon matListItemIcon>people</mat-icon>
        <span>{{'users' | i18n}}</span>
      </a>
      <span class="spacer"></span>
      }
    </mat-nav-list>
    }

    <span class="spacer"></span>


    @if(debug) {
    <mat-nav-list>
      <a mat-list-item (click)="random()">Random Data</a>
    </mat-nav-list>
    }
    @if(admin) {
    }

  </mat-sidenav>

  <!-- Main content -->
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>