<div class="ov-page-container">
	<div class="room-access-container fade-in">
		<!-- Header Section -->
		<div class="room-header">
			<mat-icon class="ov-room-icon room-icon">video_chat</mat-icon>
			<div class="room-info">
				<h1 class="room-title">{{ roomName() }}</h1>
				@if (isE2EEEnabled()) {
					<span class="encryption-badge" matTooltip="End-to-end encrypted">
						<mat-icon class="badge-icon">lock</mat-icon>
						This meeting is end-to-end encrypted
					</span>
				}
			</div>
		</div>

		<!-- Action Cards Grid -->
		<div class="action-cards-grid">
			<!-- Join Room Card -->
			<mat-card class="action-card primary-card fade-in" [ngClass]="{ 'room-closed-card': roomClosed() }">
				<mat-card-header class="card-header">
					<mat-icon class="ov-room-icon card-icon">{{ roomClosed() ? 'lock' : 'meeting_room' }}</mat-icon>
					<div class="card-title-group">
						<mat-card-title>{{ roomClosed() ? 'Room Closed' : 'Join Meeting' }}</mat-card-title>
						<mat-card-subtitle>{{
							roomClosed()
								? 'This room is not available for meetings'
								: 'Enter the room and start connecting'
						}}</mat-card-subtitle>
					</div>
				</mat-card-header>

			<mat-card-content class="card-content">
				@if (!roomClosed()) {
					<form [formGroup]="participantForm()" (ngSubmit)="onFormSubmit()" class="join-form">
							<!-- Participant Name Input -->
							<mat-form-field appearance="outline" class="name-field">
								<mat-label>Your display name</mat-label>
								<input
									id="participant-name-input"
									matInput
									placeholder="Enter your name"
									formControlName="name"
									required
								/>
								<mat-icon matSuffix class="ov-action-icon">person</mat-icon>
								@if (participantForm().get('name')?.hasError('required')) {
									<mat-error> The name is <strong>required</strong> </mat-error>
								}
							</mat-form-field>

							<!-- E2EE Key Input (shown when E2EE is enabled and key is not pre-filled from URL) -->
							@if (showE2EEKeyInput()) {
								<mat-form-field appearance="outline" class="e2eekey-field fade-in">
									<mat-label>Encryption Key</mat-label>
									<input
										id="participant-e2eekey-input"
										matInput
										type="password"
										placeholder="Enter room encryption key"
										formControlName="e2eeKey"
										required
									/>
								<mat-icon matSuffix class="ov-action-icon">vpn_key</mat-icon>
								@if (participantForm().get('e2eeKey')?.hasError('required')) {
									<mat-error> The encryption key is <strong>required</strong> </mat-error>
								}
									<mat-hint>This room requires an encryption key to join</mat-hint>
								</mat-form-field>
							}

							<button
								mat-raised-button
								color="primary"
								id="participant-name-submit"
								type="submit"
								class="join-button"
								[disabled]="!participantForm().valid"
							>
								<span>Join Meeting</span>
							</button>
						</form>
					} @else {
						<div class="room-closed-message">
							<mat-icon class="warning-icon">warning</mat-icon>
							<p>
								Sorry, this room is closed. You cannot join at this time. Please contact the meeting
								organizer for more information.
							</p>
						</div>
					}
				</mat-card-content>
			</mat-card>

			<!-- View Recordings Card -->
			@if (showRecordingCard()) {
				<mat-card class="action-card secondary-card fade-in-delayed">
					<mat-card-header class="card-header">
						<mat-icon class="ov-recording-icon card-icon">video_library</mat-icon>
						<div class="card-title-group">
							<mat-card-title>View Recordings</mat-card-title>
							<mat-card-subtitle>Browse and manage past recordings</mat-card-subtitle>
						</div>
					</mat-card-header>

					<mat-card-content class="card-content">
						<div class="recordings-info">
							<p class="recordings-description">
								Access previously recorded meetings from this room. You can watch, download, or manage
								existing recordings.
							</p>
						</div>

						<button
							id="view-recordings-btn"
							mat-stroked-button
							color="accent"
							(click)="onViewRecordingsClick()"
							class="recordings-button"
						>
							<span>Browse Recordings</span>
						</button>
					</mat-card-content>
				</mat-card>
			}
		</div>

		<!-- Room URL Badge -->
		@if (!roomClosed() && showShareLink()) {
			<ov-share-meeting-link [meetingUrl]="meetingUrl()" (copyClicked)="onCopyLinkClick()"></ov-share-meeting-link>
		}

		<!-- Quick Actions -->
		@if (showBackButton()) {
			<div class="quick-actions fade-in-delayed-more">
				<button mat-button class="quick-action-button" (click)="onBackClick()">
					<mat-icon>arrow_back</mat-icon>
					<span>{{ backButtonText() }}</span>
				</button>
			</div>
		}
	</div>
</div>
