<div class="login-container">
	<div class="card-container">
		<mat-card class="login-card">
			<h1>Log in</h1>
			<p>Continue to OpenVidu Console</p>
			<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
				<mat-form-field class="form-input" appearance="fill">
					<mat-label>Username</mat-label>
					<input matInput formControlName="username" required />
					<mat-icon matPrefix>person</mat-icon>
				</mat-form-field>

				<mat-form-field class="form-input" appearance="fill">
					<mat-label>Password</mat-label>
					<input matInput type="password" formControlName="password" required />
					<mat-icon matPrefix>lock</mat-icon>
				</mat-form-field>

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

			@if (loginErrorMessage) {
				<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
			}
		</mat-card>
		<div class="signup-section">
			<div>
				<img src="https://openvidu.io/assets/images/openvidu_white_bg_transp.png" alt="Sign Up" />
			</div>
		</div>
	</div>
</div>
