@if (loading) {
	<div id="spinner" [@inOutAnimation]>
		<mat-spinner [diameter]="50"></mat-spinner>
		<span>{{ 'ROOM.JOINING' | translate }}</span>
	</div>
} @else {
	@if (viewportService.shouldShowLandscapeWarning()) {
		<ov-landscape-warning></ov-landscape-warning>
	}
	<div id="session-container" [@inOutAnimation]>
		<mat-sidenav-container #container #videoContainer class="sidenav-container">
			<mat-sidenav
				#sidenav
				mode="{{ sidenavMode }}"
				position="end"
				class="sidenav-menu"
				[ngClass]="{ big: settingsPanelOpened }"
				fixedInViewport="true"
				fixedTopGap="0"
				fixedBottomGap="0"
			>
				<ng-container *ngTemplateOutlet="panelTemplate"></ng-container>
			</mat-sidenav>

			<mat-sidenav-content class="sidenav-main">
				<div id="layout-container" #layoutContainer>
					<ng-container *ngTemplateOutlet="layoutTemplate"></ng-container>
				</div>
			</mat-sidenav-content>
		</mat-sidenav-container>

		<div id="footer-container" *ngIf="toolbarTemplate">
			<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
		</div>
	</div>
}