package templates

templ LoginFormContent(content LoginFormValidationContent) {
	<div id="login-form-container">
		<div class="mb-3">
			<label for="username" class="form-label">
				Username
			</label>
			<input
				type="text"
				id="username"
				name="username"
				class={ "form-control",
						templ.KV("is-invalid", content.UsernameError != ""),
						templ.KV("is-valid", content.Validated && content.UsernameError == "") }
				value={ content.Username }
			/>
			if content.UsernameError != "" {
				<div class="invalid-feedback">{ content.UsernameError }</div>
			}
		</div>
		<div class="mb-3">
			<label for="password" class="form-label">
				Password
			</label>
			<input
				type="text"
				id="password"
				name="password"
				class={ "form-control",
						templ.KV("is-invalid", content.PasswordError != ""),
						templ.KV("is-valid", content.Validated && content.PasswordError == "") }
				value={ content.Password }
			/>
			if content.PasswordError != "" {
				<div class="invalid-feedback">{ content.PasswordError }</div>
			}
		</div>
		if content.LoginError != "" {
			<div class="alert alert-danger">
				{ content.LoginError }
			</div>
		}
		<div class="text-center">
			<button type="submit" class="btn btn-success">
				Submit
			</button>
		</div>
	</div>
}

templ RenderLogin(pc PageContext) {
	@baseLayout(pc) {
		<div class="card ms-auto me-auto" style="max-width: 500px;">
			<div class="card-body">
				<h4 class="card-title mb-4">
					Login
				</h4>
				<form
					hx-post="/login"
					hx-target="#login-form-container"
					hx-swap="outerHTML"
				>
					@LoginFormContent(LoginFormValidationContent{})
				</form>
			</div>
		</div>
	}
}