@if (this.show()) {
  <mat-toolbar>
    <mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
    <h2>{{ translatedTitle }}</h2>
    <mat-select
      [(value)]="selectedLanguageFlag"
      (selectionChange)="switchLang($event)"
      style="margin-left: 50px; width: 100px"
      >
      <mat-select-trigger>
        <img
          src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
          style="width: 30px"
          />
      </mat-select-trigger>
      <mat-option value="fr">
        <img src="assets/img/fr.svg" style="width: 30px" />
      </mat-option>
      <mat-option value="en">
        <img src="assets/img/en.svg" style="width: 30px" />
      </mat-option>
    </mat-select>
  </mat-toolbar>
}

<mat-sidenav-container>
  <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="Summary"
        svgIcon="summary"
      ></mat-icon>
      <a
        routerLink="/summary"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_Summary" | translate }}</a
        >
        <hr class="splitter" />
      </mat-nav-list>
      <mat-nav-list>
        <mat-icon
          aria-hidden="false"
          aria-label="List of jumps"
          svgIcon="list"
        ></mat-icon>
        <a
          routerLink="/jumps"
          routerLinkActive="active"
          (click)="snav.toggle()"
          skipLocationChange
          >{{ "App_Nav_Jumps" | translate }}</a
          >
        </mat-nav-list>
        <mat-nav-list>
          <mat-icon
            aria-hidden="false"
            aria-label="Add jumps"
            svgIcon="add"
          ></mat-icon>
          <a
            routerLink="/newjump"
            routerLinkActive="active"
            (click)="snav.toggle()"
            skipLocationChange
            >{{ "App_Nav_NewJump" | translate }}</a
            >
            <hr class="splitter" />
          </mat-nav-list>
          <mat-nav-list>
            <mat-icon
              aria-hidden="false"
              aria-label="List of tunnel flights"
              svgIcon="list"
            ></mat-icon>
            <a
              routerLink="/tunnelFlights"
              routerLinkActive="active"
              (click)="snav.toggle()"
              skipLocationChange
              >{{ "App_Nav_TunnelFlights" | translate }}</a
              >
            </mat-nav-list>
            <mat-nav-list>
              <mat-icon
                aria-hidden="false"
                aria-label="Add flights in tunnel"
                svgIcon="add"
              ></mat-icon>
              <a
                routerLink="/newTunnelFlight"
                routerLinkActive="active"
                (click)="snav.toggle()"
                skipLocationChange
                >{{ "App_Nav_NewTunnelFlight" | translate }}</a
                >
                <hr class="splitter" />
              </mat-nav-list>
              <mat-nav-list>
                <mat-icon
                  aria-hidden="false"
                  aria-label="Dropzones"
                  svgIcon="dz"
                ></mat-icon>
                <a
                  routerLink="/dzs"
                  routerLinkActive="active"
                  (click)="snav.toggle()"
                  skipLocationChange
                  >{{ "App_Nav_Dzs" | translate }}</a
                  >
                </mat-nav-list>
                <mat-nav-list>
                  <mat-icon
                    aria-hidden="false"
                    aria-label="Aircrafts"
                    svgIcon="aircraft"
                  ></mat-icon>
                  <a
                    routerLink="/aircrafts"
                    routerLinkActive="active"
                    (click)="snav.toggle()"
                    skipLocationChange
                    >{{ "App_Nav_Aircrafts" | translate }}</a
                    >
                  </mat-nav-list>
                  <mat-nav-list>
                    <mat-icon
                      aria-hidden="false"
                      aria-label="List of jump types"
                      svgIcon="flight_land"
                    ></mat-icon>
                    <a
                      routerLink="/jumpTypes"
                      routerLinkActive="active"
                      (click)="snav.toggle()"
                      skipLocationChange
                      >{{ "App_Nav_JumpTypes" | translate }}</a
                      >
                    </mat-nav-list>
                    <mat-nav-list>
                      <mat-icon
                        aria-hidden="false"
                        aria-label="List of gears"
                        svgIcon="gear"
                      ></mat-icon>
                      <a
                        routerLink="/gears"
                        routerLinkActive="active"
                        (click)="snav.toggle()"
                        skipLocationChange
                        >{{ "App_Nav_Gears" | translate }}</a
                        >
                      </mat-nav-list>
                      @if (currentUser) {
                        <mat-nav-list>
                          <hr class="splitter" />
                          <mat-icon
                            aria-hidden="false"
                            aria-label="User account"
                            svgIcon="account"
                          ></mat-icon>
                          <a
                            routerLink="/user"
                            routerLinkActive="active"
                            (click)="snav.toggle()"
                            skipLocationChange
                            >
                            {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
                          </a>
                        </mat-nav-list>
                      }
                      @if (currentUser) {
                        <mat-nav-list>
                          <mat-icon
                            aria-hidden="false"
                            aria-label="To logout"
                            svgIcon="logout"
                          ></mat-icon>
                          <span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
                            "App_Nav_Logout" | translate
                          }}</span>
                        </mat-nav-list>
                      }
                    </mat-sidenav>

                    <mat-sidenav-content>
                      <router-outlet></router-outlet>
                      <footer style="text-align: right">
                        {{ "App_Footer" | translate }}{{ version }} - &#64;Séb
                      </footer>
                    </mat-sidenav-content>
                  </mat-sidenav-container>