lib_plankton.zoo_page.register(
	"login",
	(parameters, target_element) => {
		target_element.appendChild(template_request("login"));
		
		target_element.querySelector(".login-title").textContent = lib_plankton.translate.get("page.login.title");

		const form = new lib_plankton.zoo_form.class_form<
			{
				name : string;
				password : string;
			},
			{
				name : string;
				password : string;
			}
		>(
			x => x,
			x => x,
			new lib_plankton.zoo_input.class_input_group(
				[
					{
						"name": "name",
						"input": new lib_plankton.zoo_input.class_input_text(),
						"label": lib_plankton.translate.get("page.login.name"),
					},
					{
						"name": "password",
						"input": new lib_plankton.zoo_input.class_input_password(),
						"label": lib_plankton.translate.get("page.login.password"),
					},
				]
			),
			[
				{
					"label": lib_plankton.translate.get("page.login.submit"),
					"procedure": async (get_value, get_representation) => {
						const value = await get_value();
						(
							_espe.backend.login(value.name, value.password)
							.then(
								() => {
									lib_plankton.zoo_page.set({"name": "index", "parameters": {}});
									update_nav({"mode": "logged_in"});
								}
							)
							.catch(
								(error) => {
									form.input_write(
										{
											"name": value.name,
											"password": ""
										}
									);
								}
							)
						);
					},
				}
			]
		);
		form.setup(target_element.querySelector(".login-form") as HTMLElement);
	}
);