@if (vm$ | async; as vm) {
	<ng-container *transloco="let t">
		<div class="dashboard flex flex-col flex-auto min-w-0 absolute inset-0 overflow-hidden">
			<div class="flex flex-col flex-auto overflow-hidden px-4 md:px-8 pt-4">
				<!-- Small Screen UI -->
				@if (isScreenSmall) {
					<!-- Tabs -->
					<div class="xl:hidden relative flex flex-row justify-between items-center pb-4">
						<button
							(click)="selectTabView('RoomPlan')"
							[ngClass]="{ active: vm.tabView === 'RoomPlan' }"
							class="tab">
							{{ t('Room Plan') }}
						</button>
						<button
							(click)="selectTabView('Notifications')"
							[ngClass]="{ active: vm.tabView === 'Notifications' }"
							class="tab">
							{{ t(vm.selectedTable?.order ? 'Order' : 'Notifications') }}
						</button>
					</div>

					<!-- Room Plan -->
					@if (vm.tabView === 'RoomPlan') {
						<kadi-room-plan
							[isScreenSmall]="isScreenSmall"
							class="flex flex-col flex-auto overflow-hidden" />
					}

					<!-- Orders and Notifications Sidebar -->
					@if (vm.tabView === 'Notifications') {
						<ng-container [ngTemplateOutlet]="vm.sidebarView === 'Order' ? orderTemplate : notificationsTemplate" />
					}
				}

				<!-- Large Screen UI -->
				@if (!isScreenSmall) {
					<div class="flex flex-auto space-x-4 overflow-hidden">
						<kadi-room-plan
							[isScreenSmall]="isScreenSmall"
							class="flex flex-col flex-auto overflow-hidden grow" />

						<div
							class="flex flex-col flex-auto overflow-hidden relative {{
								showSidebar ? 'sm:min-w-md xl:max-w-lg' : 'max-w-10'
							}}">
							<!-- Collapse button -->
							<button
								(click)="showSidebar = !showSidebar"
								class="absolute -left-1 top-20 z-50 text-white bg-black/50 rounded-full text-xl w-8 h-8 flex justify-center items-center hover:bg-blue-500 transition-all">
								@if (showSidebar) {
									<svg lucideChevronRight />
								} @else {
									<svg lucideChevronLeft />
								}
							</button>

							<!-- Divider line -->
							@if (!showSidebar) {
								<div class="w-px h-full absolute left-2.5 bg-gray-300"></div>
							}

							@if (showSidebar) {
								<ng-container [ngTemplateOutlet]="vm.sidebarView === 'Order' ? orderTemplate : notificationsTemplate" />
							}
						</div>
					</div>
				}
			</div>

			<!-- Small screen router, Large screen router is in Room Plan component -->
			@if (isScreenSmall && vm.tabView === 'RoomPlan') {
				<router-outlet />
			}
		</div>
	</ng-container>
}

<ng-template #notificationsTemplate>
	<kadi-dashboard-notifications class="flex flex-col flex-auto overflow-hidden" />
</ng-template>

<ng-template #orderTemplate>
	<kadi-order class="flex flex-col flex-auto overflow-hidden" />
</ng-template>