<div class="loading-container" *ngIf="loading">
    <img class="loading-img" src="../../assets/loader.gif" />
</div>
<div class="flip-container" *ngIf="device$.flipPhone">
    <div class="flip-msg">
        Flip the device.<br>
        <mat-icon>screen_rotation</mat-icon>
    </div>
</div>

<mat-drawer-container fullscreen>
    <mat-drawer #drawer mode="side" opened>
        <diunabi-main-menu></diunabi-main-menu>
        <mat-divider></mat-divider>
        <small>
            &nbsp;Build #{{appVersion}}
        </small>
        <br>
        <small>
            &nbsp;&copy;&nbsp;DiunaBI {{currentDate | date: 'yyyy'}}
        </small>
    </mat-drawer>
    <mat-toolbar class="toolbar" color="primary">
        <button mat-icon-button aria-label="Menu" (click)="drawer.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        {{environment.appName}}
        <div class="fill-space"></div>
        <a mat-icon-button [matMenuTriggerFor]="userMenu">
            <mat-icon *ngIf="!auth$.user?.avatar">account_circle</mat-icon>
            <img *ngIf="auth$.user?.avatar" [src]="auth$.user?.avatar" class="profile-photo-small"
               alt="Profile photo">
        </a>
        <mat-menu #userMenu="matMenu">
            <div class="profile-info">
                <img [src]="auth$.user?.avatar" class="profile-photo-big" alt="Profile photo">
                <p>{{auth$.user?.userName}}</p>
            </div>
            <button mat-menu-item (click)="auth$.logoutHandler()">
                <mat-icon>exit_to_app</mat-icon>
                <span>Logout</span>
            </button>
        </mat-menu>
    </mat-toolbar>
    <div>
        <router-outlet></router-outlet>
    </div>
</mat-drawer-container>
