<mat-toolbar class="meet-toolbar" id="main-toolbar">
	<button mat-icon-button aria-label="Menu icon" (click)="toggleSideMenu()" id="menu-toggle-btn">
		<mat-icon>menu</mat-icon>
	</button>

	<span class="toolbar-title" id="app-title">OpenVidu Meet</span>

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

	<!-- <button mat-icon-button aria-label="Profile" id="profile-btn">
		<mat-icon>account_circle</mat-icon>
	</button> -->

	<button
		mat-icon-button
		(click)="toggleTheme()"
		[matTooltip]="isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'"
		aria-label="Toggle theme mode"
		id="theme-toggle-btn"
	>
		<mat-icon>{{ isDarkMode() ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
	</button>
	<button mat-icon-button (click)="onLogoutClicked.emit()" matTooltip="Logout" aria-label="Logout" id="logout-btn">
		<mat-icon>logout</mat-icon>
	</button>
</mat-toolbar>

<mat-sidenav-container autosize class="sidenav-container" id="sidenav-container">
	<mat-sidenav
		#sidenav
		[ngClass]="isSideMenuCollapsed ? 'collapsed' : 'expanded'"
		[mode]="isMobile ? 'over' : 'side'"
		[opened]="isMobile ? 'false' : 'true'"
		id="side-navigation"
	>
		<mat-nav-list id="nav-list">
			@for (link of navLinks; track link.route) {
				<ng-container>
					<a
						mat-list-item
						class="menu-button"
						[routerLink]="link.route"
						routerLinkActive="active-nav-item"
						[routerLinkActiveOptions]="{ exact: false }"
						(click)="link.clickHandler ? link.clickHandler() : null"
						[matTooltip]="isSideMenuCollapsed ? link.label : ''"
						[matTooltipPosition]="'right'"
						[matTooltipClass]="'nav-tooltip'"
						[matTooltipDisabled]="!isSideMenuCollapsed"
						[id]="'nav-link-' + link.route!.replace('/', '')"
					>
						<span class="entry" [ngClass]="isSideMenuCollapsed ? 'centeredEntry' : 'entry'">
							<mat-icon [ngClass]="link.iconClass">{{ link.icon }}</mat-icon>
							@if (!isSideMenuCollapsed) {
								{{ link.label }}
							}
						</span>
					</a>
				</ng-container>
			}
		</mat-nav-list>

		@if (!isSideMenuCollapsed) {
			<div class="separator" id="nav-separator"></div>
			<div class="version" id="version-info">
				<p>{{ version }}</p>
			</div>
		}
	</mat-sidenav>

	<!-- Main content -->
	<mat-sidenav-content id="main-content">
		<div class="page-content" id="page-content">
			<router-outlet></router-outlet>
		</div>
	</mat-sidenav-content>
</mat-sidenav-container>
