<div class="wizard-container ov-theme-transition">
	@if (steps().length !== 0) {
		<header class="wizard-header">
			<p class="subtitle">
				{{
					editMode ? 'Edit your room settings' : 'Create and configure your video room in a few simple steps'
				}}
			</p>
			@if (!isBasicCreation()) {
				<ov-step-indicator
					[steps]="steps()"
					[currentStepIndex]="currentStepIndex()"
					[allowNavigation]="true"
					[editMode]="editMode"
					(stepClick)="onStepClick($event)"
				>
				</ov-step-indicator>
			}
		</header>

		<main class="wizard-content">
			<section class="step-content ov-surface">
				@if (isCreatingRoom()) {
					<!-- Room Creation Loading State -->
					<div class="room-creation-loading">
						<div class="loading-content">
							<div class="loading-header">
								<div class="loading-title">
									<mat-icon class="ov-room-icon loading-icon">video_chat</mat-icon>
									<h2>{{ editMode ? 'Updating Room' : 'Creating Room' }}</h2>
								</div>
								<p class="loading-subtitle">
									{{
										editMode
											? 'Please wait while we update your room settings...'
											: 'Please wait while we set up your video room...'
									}}
								</p>
							</div>
							<div class="loading-spinner-container">
								<mat-spinner diameter="48"></mat-spinner>
							</div>
						</div>
					</div>
				} @else {
					@if (isBasicCreation()) {
						<!-- Basic Room Creation -->
						<ov-room-basic-creation
							(createRoom)="createRoom($event)"
							(openAdvancedMode)="onOpenAdvancedMode()"
						></ov-room-basic-creation>
					} @else {
						<!-- Room Wizard Steps -->
						@switch (currentStep()?.id) {
							@case ('roomDetails') {
								<ov-room-wizard-room-details></ov-room-wizard-room-details>
							}
							@case ('recording') {
								<ov-recording-preferences></ov-recording-preferences>
							}
							@case ('recordingTrigger') {
								<ov-recording-trigger></ov-recording-trigger>
							}
							@case ('recordingLayout') {
								<ov-recording-layout></ov-recording-layout>
							}
							@case ('preferences') {
								<ov-room-preferences></ov-room-preferences>
							}
						}
					}
				}
			</section>
		</main>

		<footer class="wizard-footer">
			@if (isBasicCreation()) {
				<div class="basic-nav">
					<nav class="wizard-navigation">
						<button mat-stroked-button class="cancel-button" (click)="onCancel()">
							<mat-icon>close</mat-icon>
							<span>Cancel</span>
						</button>
					</nav>
				</div>
			} @else {
				<ov-wizard-nav
					class="wizard-nav"
					[config]="navigationConfig()"
					[currentStepId]="currentStepIndex()"
					[backButtonText]="'Back to simple mode'"
					(previous)="onPrevious()"
					(next)="onNext()"
					(cancel)="onCancel()"
					(back)="onBack()"
					(finish)="onFinish()"
				>
				</ov-wizard-nav>
			}
		</footer>
	}
</div>
