@if (this.show()) {
    <mat-toolbar>
        <h2 (click)="snav.toggle()">
            <mat-icon svgIcon="menu"></mat-icon>
            {{ 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>
        <span class="spacer"></span>
        <span style="font-size: 12px"
            >{{ "App_Footer" | translate }}{{ version }} - &#64;Séb</span
        >
    </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>
    </mat-sidenav-content>
</mat-sidenav-container>