<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>OpenVidu Meet Tutorial</title>
		<!-- Bootstrap -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
			rel="stylesheet"
		/>
		<link rel="stylesheet" href="css/home.css" />
	</head>
	<body>
		<div class="container">
			<!-- Rooms List Section -->
			<div class="rooms-container">
				<div class="rooms-header">
					<h2 class="text-center text-primary">Join a Room</h2>
					<p class="text-muted text-center">Join to an existing room</p>
				</div>

				<div class="rooms-list">
					<div class="action-buttons-container mb-3 text-center">
						<div class="mb-3 text-center">
							<form action="/delete-all-rooms" method="post">
								<button
									type="submit"
									class="btn btn-danger btn-sm"
									id="delete-all-rooms-btn"
								>
									Delete All Rooms
								</button>
							</form>
						</div>
						<div class="mb-3 text-center">
							<form action="/delete-all-recordings" method="post">
								<button
									type="submit"
									class="btn btn-danger btn-sm"
									id="delete-all-recordings-btn"
								>
									Delete All Recordings
								</button>
							</form>
						</div>
					</div>

					{{#rooms.length}}
					<ul class="list-group">
						{{#rooms}}
						<li
							id="{{ roomId }}"
							class="list-group-item d-flex justify-content-between align-items-center"
						>
							<span>{{ roomId }}</span>
							<div class="dropdown-button">
								<button
									class="btn btn-primary btn-sm dropdown-toggle"
									type="button"
									data-bs-toggle="dropdown"
								>
									Join as
								</button>
								<ul class="dropdown-menu">
									<li>
										<form action="/join-room" method="post">
											<input
												type="hidden"
												name="roomUrl"
												value="{{ moderatorUrl }}"
											/>
											<input
												type="hidden"
												name="participantRole"
												value="moderator"
											/>
											<input type="hidden" name="roomId" value="{{ roomId }}" />

											<button
												type="submit"
												id="join-as-moderator"
												class="dropdown-item"
											>
												Moderator
											</button>
										</form>
									</li>
									<li>
										<form action="/join-room" method="post">
											<input
												type="hidden"
												name="roomUrl"
												value="{{ speakerUrl }}"
											/>
											<input
												type="hidden"
												name="participantRole"
												value="speaker"
											/>
											<input type="hidden" name="roomId" value="{{ roomId }}" />

											<button
												type="submit"
												id="join-as-speaker"
												class="dropdown-item"
											>
												Speaker
											</button>
										</form>
									</li>
									{{! SHOW ONLY RECORDINGS LINK }}
									<li>
										<form action="/join-room" method="post">
											<input
												type="hidden"
												name="roomUrl"
												value="{{ moderatorUrl }}"
											/>
											<input
												type="hidden"
												name="participantRole"
												value="moderator"
											/>
											<input type="hidden" name="roomId" value="{{ roomId }}" />
											<input
												type="hidden"
												name="showOnlyRecordings"
												value="true"
											/>

											<button
												type="submit"
												id="view-recordings"
												class="dropdown-item"
											>
												View Recordings
											</button>
										</form>
									</li>
								</ul>
							</div>
						</li>
						{{/rooms}}
					</ul>
					{{/rooms.length}}
					{{^rooms.length}}
					<p class="text-muted text-center">No rooms available.</p>
					{{/rooms.length}}
				</div>
			</div>

			<!-- Create Room Section -->
			<div class="create-room">
				<h2 class="text-center text-primary mb-3">Create a new Room</h2>
				<p class="text-muted text-center mb-4">Generate a room from scratch</p>

				<form action="/room" method="post" class="d-flex flex-column h-100">
					<!-- Basic Information -->
					<div class="form-section">
						<div class="mb-3">
							<label for="room-name" class="form-label">Room Name *</label>
							<input
								type="text"
								name="roomName"
								id="room-name"
								class="form-control"
								placeholder="e.g. Team meeting"
								required
							/>
						</div>

						<div class="mb-3">
							<label for="expiration-date" class="form-label">Expiration Date</label>
							<input
								type="date"
								name="autoDeletionDate"
								id="expiration-date"
								class="form-control"
							/>
						</div>
					</div>

					<!-- Config Accordion -->
					<div class="config-accordion">
						<div class="accordion" id="configAccordion">
							<!-- Chat Config -->
							<div class="accordion-item">
								<h2 class="accordion-header">
									<button
										class="accordion-button"
										type="button"
										data-bs-toggle="collapse"
										data-bs-target="#chatCollapse"
										aria-expanded="true"
										aria-controls="chatCollapse"
										data-testid="chat-config-toggle"
									>
										Chat Settings
									</button>
								</h2>
								<div
									id="chatCollapse"
									class="accordion-collapse collapse show"
									data-bs-parent="#configAccordion"
								>
									<div class="accordion-body">
										<div class="form-check">
											<input
												type="checkbox"
												name="config.chat.enabled"
												id="chat-enabled"
												class="form-check-input"
												checked
												data-testid="chat-enabled-checkbox"
											/>
											<label for="chat-enabled" class="form-check-label">
												Enable Chat
											</label>
										</div>
									</div>
								</div>
							</div>

							<!-- Recording Config -->
							<div class="accordion-item">
								<h2 class="accordion-header">
									<button
										class="accordion-button collapsed"
										type="button"
										data-bs-toggle="collapse"
										data-bs-target="#recordingCollapse"
										aria-expanded="false"
										aria-controls="recordingCollapse"
										data-testid="recording-config-toggle"
									>
										Recording Settings
									</button>
								</h2>
								<div
									id="recordingCollapse"
									class="accordion-collapse collapse"
									data-bs-parent="#configAccordion"
								>
									<div class="accordion-body">
										<div class="form-check mb-2">
											<input
												type="checkbox"
												name="config.recording.enabled"
												id="recording-enabled"
												class="form-check-input"
												checked
												data-testid="recording-enabled-checkbox"
											/>
											<label for="recording-enabled" class="form-check-label">
												Enable Recording
											</label>
										</div>

										<div id="recording-access-section">
											<label for="recording-access" class="form-label"
												>Recording Access Level</label
											>
											<select
												name="config.recording.allowAccessTo"
												id="recording-access"
												class="form-select"
												data-testid="recording-access-select"
											>
												<option value="admin">Admin Only</option>
												<option value="admin_moderator">
													Admin & Moderator
												</option>
												<option value="admin_moderator_speaker" selected>
													Admin, Moderator & Speaker
												</option>
											</select>
										</div>
									</div>
								</div>
							</div>

							<!-- Virtual Background Config -->
							<div class="accordion-item">
								<h2 class="accordion-header">
									<button
										class="accordion-button collapsed"
										type="button"
										data-bs-toggle="collapse"
										data-bs-target="#backgroundCollapse"
										aria-expanded="false"
										aria-controls="backgroundCollapse"
										data-testid="background-config-toggle"
									>
										Virtual Background Settings
									</button>
								</h2>
								<div
									id="backgroundCollapse"
									class="accordion-collapse collapse"
									data-bs-parent="#configAccordion"
								>
									<div class="accordion-body">
										<div class="form-check">
											<input
												type="checkbox"
												name="config.virtualBackground.enabled"
												id="virtual-background-enabled"
												class="form-check-input"
												checked
												data-testid="virtual-background-enabled-checkbox"
											/>
											<label
												for="virtual-background-enabled"
												class="form-check-label"
											>
												Enable Virtual Backgrounds
											</label>
										</div>
									</div>
								</div>
							</div>

							<!-- E2EE Config -->
							<div class="accordion-item">
								<h2 class="accordion-header">
									<button
										class="accordion-button collapsed"
										type="button"
										data-bs-toggle="collapse"
										data-bs-target="#e2eeCollapse"
										aria-expanded="false"
										aria-controls="e2eeCollapse"
										data-testid="e2ee-config-toggle"
									>
										End-to-End Encryption (E2EE) Settings
									</button>
								</h2>
								<div
									id="e2eeCollapse"
									class="accordion-collapse collapse"
									data-bs-parent="#configAccordion"
								>
									<div class="accordion-body">
										<div class="form-check">
											<input
												type="checkbox"
												name="config.e2ee.enabled"
												id="e2ee-enabled"
												class="form-check-input"
												data-testid="e2ee-enabled-checkbox"
											/>
											<label
												for="e2ee-enabled"
												class="form-check-label"
											>
												Enable End-to-End Encryption
											</label>
										</div>
										<div class="alert alert-info mt-2" role="alert">
											<small>
												<strong>Note:</strong> When E2EE is enabled, recording will be automatically disabled for security reasons.
											</small>
										</div>
									</div>
								</div>
							</div>

							<!-- Captions Config -->
							<div class="accordion-item">
								<h2 class="accordion-header">
									<button
										class="accordion-button collapsed"
										type="button"
										data-bs-toggle="collapse"
										data-bs-target="#captionsCollapse"
										aria-expanded="false"
										aria-controls="captionsCollapse"
										data-testid="captions-config-toggle"
									>
										Captions Settings
									</button>
								</h2>
								<div
									id="captionsCollapse"
									class="accordion-collapse collapse"
									data-bs-parent="#configAccordion"
								>
									<div class="accordion-body">
										<div class="form-check">
											<input
												type="checkbox"
												name="config.captions.enabled"
												id="captions-enabled"
												class="form-check-input"
												data-testid="captions-enabled-checkbox"
											/>
											<label
												for="captions-enabled"
												class="form-check-label"
											>
												Enable Captions
											</label>
										</div>
										<div class="alert alert-info mt-2" role="alert">
											<small>
												<strong>Note:</strong> Enables live transcription (captions) during meetings.
											</small>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Create Button - Always visible -->
					<div class="mt-auto pt-3">
						<button
							type="submit"
							class="create-room-btn btn btn-primary w-100"
							data-testid="create-room-button"
						>
							Create Room
						</button>
					</div>
				</form>
			</div>
		</div>

		<!-- Bootstrap JS -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	</body>
</html>
