@page "/login"

<div class="d-flex align-items-center py-4 bg-body-tertiary">
	<main class="form-signin w-100 m-auto">
		<form>
			<div class="text-center">
				<img class="mb-4" src="/Images/Logo_medium.png" alt="" width="72" height="57">
			</div>

			<h1 class="h3 mb-3 fw-normal text-center">Please sign in</h1>
			<div class="form-floating mb-3">
				<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
				<label for="floatingInput">Email address</label>
				<div data-lastpass-icon-root="" style="position: relative !important; height: 0px !important; width: 0px !important; display: initial !important; float: left !important;">
				</div>
			</div>
			<div class="form-floating">
				<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
				<label for="floatingPassword">Password</label>
				<div data-lastpass-icon-root="" style="position: relative !important; height: 0px !important; width: 0px !important; display: initial !important; float: left !important;">
				</div>
			</div>
			<div class="form-check text-start my-3">
				<input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
				<label class="form-check-label" for="checkDefault">
					Remember me
				</label>
			</div>
			<button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
			
			<div class="mt-3 text-center">
				<span class="text-muted">or</span>
			</div>
			
			<button class="btn btn-outline-secondary w-100 py-2 mt-3 google-sign-in" type="button">
				<img src="/Images/google-logo.svg" alt="Google logo" width="18" height="18" class="me-2">
				Sign in with Google
			</button>
			
			<p class="mt-5 mb-3 text-body-secondary">© 2017–2025</p>
		</form>
	</main>
</div>