<div class="ov-page-container">
	<div class="login-page-content">
		<!-- Login Header -->
		<div class="get-started-header">
			<mat-icon class="ov-about-icon login-icon" aria-hidden="true">login</mat-icon>
			<h1>Sign in</h1>
			<p class="subtitle">Enter your credentials to access OpenVidu Meet</p>
		</div>

		<!-- Login Card -->
		<div class="login-form-container">
			<mat-card class="login-card">
				<mat-card-content>
					<form [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
						<mat-form-field class="form-input" appearance="outline">
							<mat-label>Username</mat-label>
							<input matInput formControlName="username" placeholder="Enter your username" id="username-input" />
							<mat-icon matPrefix>person</mat-icon>
						</mat-form-field>

						<mat-form-field class="form-input" appearance="outline">
							<mat-label>Password</mat-label>
							<input
								matInput
								[type]="showPassword ? 'text' : 'password'"
								formControlName="password"
								placeholder="Enter your password"
								id="password-input"
							/>
							<mat-icon matPrefix>lock</mat-icon>
							<button
								mat-icon-button
								matSuffix
								type="button"
								(click)="showPassword = !showPassword"
								matTooltip="{{ showPassword ? 'Hide password' : 'Show password' }}"
							>
								<mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
							</button>
						</mat-form-field>

						@if (loginErrorMessage) {
							<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
						}

						<div class="login-actions">
							<button
								mat-raised-button
								color="primary"
								type="submit"
								[disabled]="loginForm.invalid"
								id="login-button"
								class="primary-button"
							>
								Login
							</button>
						</div>
					</form>
				</mat-card-content>
			</mat-card>

			<!-- Brand Section -->
			<div class="brand-section">
				<div class="brand-content">
					<img src="assets/images/meet_logo.png" alt="OpenVidu Meet" />
				</div>
			</div>
		</div>
	</div>
</div>
