@if (viewportService.shouldShowLandscapeWarning()) {
	<ov-landscape-warning></ov-landscape-warning>
} @else {
	<div class="prejoin-container" id="prejoin-container" [class.mobile]="viewportService.isMobile()" [class.name-error]="!!_error">
		<!-- Top Language Toolbar -->
		@if (!isMinimal) {
			<div class="top-toolbar">
				<ov-lang-selector [compact]="false" class="language-selector" (onLangChanged)="onLangChanged.emit($event)">
				</ov-lang-selector>
			</div>
		}

		<!-- Loading State -->
		@if (isLoading) {
			<div class="loading-overlay">
				<div class="loading-content">
					<mat-spinner [diameter]="40"></mat-spinner>
					<span class="loading-text">{{ 'PREJOIN.PREPARING' | translate }}</span>
				</div>
			</div>
		} @else {
			<!-- Main Content -->
			<div class="prejoin-content">
				<!-- Main Card -->
				<div class="prejoin-main">
					<!-- Video Preview Section -->
					<div class="video-preview-section">
						<div class="video-preview-container" [class.compact]="showBackgroundPanel">
							<div class="video-frame">
								<ov-media-element
									[track]="videoTrack"
									[showAvatar]="!isVideoEnabled"
									[avatarName]="participantName"
									[avatarColor]="'hsl(48, 100%, 50%)'"
									[isLocal]="true"
									class="video-element"
									[id]="videoTrack?.id || 'no-video'"
								>
								</ov-media-element>

								<!-- Video Controls Overlay -->
								<div class="video-overlay">
									<div class="device-controls">
										<div class="control-group" *ngIf="showCameraButton">
											<ov-video-devices-select
												[compact]="true"
												(onVideoDeviceChanged)="videoDeviceChanged($event)"
												(onVideoEnabledChanged)="videoEnabledChanged($event)"
												(onVideoDevicesLoaded)="onVideoDevicesLoaded($event)"
												class="device-selector"
											>
											</ov-video-devices-select>
										</div>

										<div class="control-group" *ngIf="showMicrophoneButton">
											<ov-audio-devices-select
												[compact]="true"
												(onAudioDeviceChanged)="audioDeviceChanged($event)"
												(onAudioEnabledChanged)="audioEnabledChanged($event)"
												(onDeviceSelectorClicked)="onDeviceSelectorClicked()"
												class="device-selector"
											>
											</ov-audio-devices-select>
										</div>
									</div>

									<!-- Virtual Background Button -->
									@if (backgroundEffectEnabled && hasVideoDevices) {
										<div class="background-control">
											<button
												mat-flat-button
												class="background-button"
												(click)="toggleBackgroundPanel()"
												[matTooltip]="'Virtual Backgrounds'"
												[disabled]="!isVideoEnabled"
												id="backgrounds-button"
											>
												<mat-icon class="material-symbols-outlined">background_replace</mat-icon>
											</button>
										</div>
									}
								</div>
							</div>
						</div>
					</div>

					@if (showBackgroundPanel) {
						<div class="vb-container">
							<ov-background-effects-panel [mode]="'prejoin'" (onClose)="closeBackgroundPanel()">
							</ov-background-effects-panel>
						</div>
					} @else {
						<!-- Configuration Section -->
						<div class="configuration-section">
							<!-- Participant Name Input -->
							<div class="participant-name-container input-section" *ngIf="showParticipantName">
								<ov-participant-name-input
									[isPrejoinPage]="true"
									[error]="!!_error"
									(onNameUpdated)="onParticipantNameChanged($event)"
									(onEnterPressed)="onEnterPressed()"
									class="name-input"
								>
								</ov-participant-name-input>
							</div>

							<!-- Error Message -->
							<div *ngIf="!!_error" class="error-message" id="token-error">
								<mat-icon class="error-icon">error_outline</mat-icon>
								<span class="error-text">{{ _error }}</span>
							</div>

							<!-- Join Button -->
							<div class="join-section">
								<button
									mat-flat-button
									(click)="join()"
									class="join-button"
									id="join-button"
									[disabled]="showParticipantName && !participantName"
								>
									{{ 'PREJOIN.JOIN' | translate }}
								</button>
							</div>
						</div>
					}
				</div>
			</div>
		}
	</div>
}