lib_plankton.zoo_page.register(
	"register",
	async (parameters, target_element) => {
		const set_state = function (state) {
			target_element.querySelector(".register").setAttribute("rel", state);
		};
		const set_message = function (message) {
			target_element.querySelector(".register-message").textContent = message;
		};
		
		const id : int = parseInt(parameters["id"]);
		const verification : string = parameters["verification"];
		// const verification : string = (new URLSearchParams(location.search)).get("verification");
		
		update_nav({"mode": null});
		
		const member_data : {
			name_real : string;
			name_login : string;
			email_address_numerical_value : string;
			email_address_namely_value : string;
		} = await _espe.backend.member_get2(id);
		
		if (false)	
		{
			const form = new lib_plankton.zoo_form.class_form<any, any>(
				x => x,
				x => x,
				new lib_plankton.zoo_input.class_input_group(
					[
						{
							"name": "id",
							"input": new lib_plankton.zoo_input.class_input_hidden(),
						},
						{
							"name": "verification",
							"input": new lib_plankton.zoo_input.class_input_hidden(),
						},
						{
							"name": "email_mode",
							"input": new lib_plankton.zoo_input.class_input_enumeration(
								[
									{"value": "none", "label": "keine"},
									{"value": "number", "label": "nur numerische" + " " + ("(" + member_data.email_address_numerical_value + ")")},
									{"value": "number_and_name", "label": "numerische und namentliche" + " " + ("(" + member_data.email_address_namely_value + ")")},
								]
							),
							"label": "Partei-E-Mail-Adresse einrichten",
							"help": "Die nummernbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"mitglied-<mitglieds-nummer>@dielinke-sachsen.de\", z.B. \"mitglied-11223344@dielinke-sachsen.de\".\n\nDie namensbasierte Partei-E-Mail-Adresse hat folgenden schematischen Aufbau: \"<name-in-kleinbuchstaben-mit-punkten-getrennt>@dielinke-sachsen.de\". Beispiel: \"Karl Liebknecht\" würde die Adresse \"karl.liebknecht@dielinke-sachsen.de\" bekommen.\n\nDie Partei-E-Mail-Adressen können zum Empfangen von E-Mails verwendet werden. Falls es nötig werden sollte, dass du auch E-Mails mit über die Partei-Adresse verschicken kannst, wende dich bitte an den/die Mitgliederbeauftragte:n!"
						},
						{
							"name": "email_redirect",
							"input": new lib_plankton.zoo_input.class_input_checkbox(),
							"label": "eingehende E-Mails zu privater Adresse umleiten",
							"help": "Um die bei der Partei-Adresse eingegangenen E-Mails zu lesen, gibt es zwei Wege: Entweder du hinterlegst das zugehörige Konto im E-Mail-Client-Programm deiner Wahl und kümmerst dich selbst darum die E-Mails regelmäßig abzurufen oder die E-Mails werden an deine private Adresse weitergeleitet, sodass sie bei deinen gewöhnlichen E-Mails mit auftauchen.\n\nWenn du dir unsicher bist, empfehlen wir dir die Umleitung anzuschalten.",
						},
						{
							"name": "name_display",
							"input": new lib_plankton.zoo_input.class_input_text({"read_only": true}),
							"label": "Anzeigename",
							"help": "So wirst du bei Online-Diensten anderen angezeigt.",
						},
						{
							"name": "salutation",
							"input": new lib_plankton.zoo_input.class_input_text(),
							"label": "Anrede/Pronomen (z.B. 'er/ihn')",
						},
						{
							"name": "name_login",
							"input": new lib_plankton.zoo_input.class_input_text(
								{
									"pattern": "^[0-9a-zA-Z_]+$",
									"read_only": true,
								}
							),
							"label": "Anmeldename",
							"help": "Dieser Wert ist der Nutzername für die Anmeldung bei den Online-Diensten. Hierfür solltest du etwas kurzes und prägnantes wählen. Diesen Namen bekommt für gewöhnlich niemand zu sehen. Bitte beachte, dass der Name noch verfügbar sein muss!",
						},
						{
							"name": "password",
							"input": new lib_plankton.zoo_input.class_input_password(),
							"label": "Passwort",
							"help": "Das Passwort für die Anmeldung bei den Online-Diensten",
						},
						{
							"name": "password_confirmation",
							"input": new lib_plankton.zoo_input.class_input_password(),
							"label": "Passwort wiederholen",
						},
					]
				),
				[
					{
						"label": "Senden",
						"procedure": async (get_value, get_representation) => {
							set_message("wird verarbeitet …");
							set_state("wait");
							
							const value : any = await get_value();
							
							if (value.password !== value.password_confirmation) {
								set_message("Die Passwörter stimmen nicht überein.");
								set_state("fill");
							}
							else {
								try {
									await _espe.backend.member_register(
										id,
										verification,
										value
									);
									set_message("Danke!");
									set_state("done");
								}
								catch (error) {
									set_message("Da ist etwas schief gelaufen :/");
									set_state("fill");
								}
							}
						},
					},
				]
			);
			
			target_element.appendChild(template_request("register"));
			
			await form.setup(target_element.querySelector(".register-form") as HTMLElement);
			await form.input_write(
				{
					"id": id,
					"verification": verification,
					"name_login": member_data.name_login,
					"name_display": member_data.name_real,
					"salutation": "",
					"email_mode": "number_and_name",
					"email_redirect": true,
					"password": "",
					"password_confirmation": "",
				}
			);
			set_state("fill");
		}
		
		{
			let dom_email_setting_container : HTMLElement = document.createElement("fieldset");
			dom_email_setting_container.classList.add("register-email_setting");
			{
				let dom_legend : HTMLElement = document.createElement("legend");
				dom_legend.textContent = "E-Mail-Einstellungen";
				dom_email_setting_container.appendChild(dom_legend);
			}
			
			async function update_email_setting() {
				const value : boolean = (await input_email_use.read())["use"];
				dom_email_setting_container.classList.toggle("show", value);
			}
			
			const input_email_use = new lib_plankton.zoo_input.class_input_group(
				[
					{
						"name": "use",
						"input": new lib_plankton.zoo_input.class_input_checkbox(
							{
								"hooks_change": [
									(value) => {update_email_setting();}
								]
							}
						),
						"label": "Partei-E-Mail-Adresse einrichten",
					}
				]
			);
			const input_email_setting = new lib_plankton.zoo_input.class_input_group(
				[
					{
						"name": "numerical",
						"input": new lib_plankton.zoo_input.class_input_checkbox(
						),
						"label": ("numerisch" + " : " + ("" + member_data.email_address_numerical_value + "")),
					},
					{
						"name": "namely",
						"input": new lib_plankton.zoo_input.class_input_checkbox(
						),
						"label": ("namentlich" + " : " + ("" + member_data.email_address_namely_value + "")),
					},
				]
			);
			await input_email_use.setup(target_element as HTMLElement);
			target_element.appendChild(dom_email_setting_container);			
			await input_email_setting.setup(dom_email_setting_container);
			await input_email_setting.write(
				{
					"numerical": true,
					"namely": true,
				}
			);
			
			await input_email_use.write({"use": true});
			update_email_setting();
		}
		{
			let dom_service_data_container : HTMLElement = document.createElement("fieldset");
			{
				let dom_legend : HTMLElement = document.createElement("legend");
				dom_legend.textContent = "Angaben für Netzdienste";
				dom_service_data_container.appendChild(dom_legend);
			}
			dom_service_data_container.classList.add("register-services_data");
			
			async function update_service_data() {
				const value : boolean = (await input_service_use.read())["use"];
				dom_service_data_container.classList.toggle("show", value);
				/*
				if (value) {
					dom_service_data_container.removeAttribute("disabled");
				}
				else {
					dom_service_data_container.setAttribute("disabled", "disabled");
				}
				 */
			}
			
			const input_service_use = new lib_plankton.zoo_input.class_input_group(
				[
					{
						"name": "use",
						"input": new lib_plankton.zoo_input.class_input_checkbox(
							{
								"hooks_change": [
									(value) => {update_service_data();}
								]
							}
						),
						"label": "Netz-Dienste nutzen",
					}
				]
			);
			const input_service_data = new lib_plankton.zoo_input.class_input_group(
				[
					{
						"name": "name_display",
						"input": new lib_plankton.zoo_input.class_input_text(
							{
							}
						),
						"label": "Anzeigename",
						"help": "So wirst du bei Online-Diensten anderen angezeigt.",
					},
					{
						"name": "name_login",
						"input": new lib_plankton.zoo_input.class_input_text(
							{
								"pattern": "^[0-9a-zA-Z_]+$",
							}
						),
						"label": "Anmeldename",
						"help": "Dieser Wert ist der Nutzername für die Anmeldung bei den Online-Diensten. Hierfür solltest du etwas kurzes und prägnantes wählen. Diesen Namen bekommt für gewöhnlich niemand zu sehen. Bitte beachte, dass der Name noch verfügbar sein muss!",
					},
					{
						"name": "password",
						"input": new lib_plankton.zoo_input.class_input_password(
						),
						"label": "Passwort",
						"help": "Das Passwort für die Anmeldung bei den Online-Diensten",
					},
					{
						"name": "password_confirmation",
						"input": new lib_plankton.zoo_input.class_input_password(
						),
						"label": "Passwort wiederholen",
					},
				]
			);
			await input_service_use.setup(target_element as HTMLElement);
			target_element.appendChild(dom_service_data_container);			
			await input_service_data.setup(dom_service_data_container);
			await input_service_data.write(
				{
					"name_display": member_data.name_real,
					"name_login": member_data.name_login,
					"password": "",
					"password_confirmation": "",
				}
			);
			
			await input_service_use.write({"use": true});
			update_service_data();
		}
	},
);