<script lang="ts">
	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
	import Progressbar from "#components/Ausweis/Progressbar.svelte";
	import Hilfe from "#components/Ausweis/Hilfe.svelte";
	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import Label from "#components/Label.svelte";
	import HelpLabel from "#components/HelpLabel.svelte";
	import ZipSearch from "#components/PlzSuche.svelte";
	import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
	import moment from "moment";
	import { BitChecker } from "src/lib/BitChecker";
	import type { BedarfsausweisWohnen } from "@ibcornelsen/database/client";

	let ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;

	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];

	let fensterArten = {
		Einfachverglasung: 5,
		"Holzfenster Doppelverglasung": 2.7,
		"Kunststofffenster Doppelverglasung": 3,
		"Alu- oder Stahlfenster Doppelverglasung": 4.3,
		"Fenster Doppelverglasung (ab 1995)": 1.8,
		"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
		"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
		"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
		"Passivhausfenster(U-Wert 0,7)": 0.7,
		"Passivhausfenster(U-Wert 0,6)": 0.6,
		"Fenster mit U-Wert 2,3": 2.3,
		"Fenster mit U-Wert 1,6": 1.6,
		"Fenster mit U-Wert 1,7": 1.7,
		"Fenster mit U-Wert 1,3": 1.3,
		"Fenster mit U-Wert 1": 1,
	};

	const arrayRange = (start: number, stop: number, step: number) =>
		Array.from(
			{ length: (stop - start) / step + 1 },
			(value, index) => start + index * step
		);

	function automatischAusfüllen() {
		ausweis.baujahr_anlage = 1974;
		ausweis.baujahr_gebaeude = 1962;
		ausweis.anzahl_einheiten = 1;
		ausweis.objekt_saniert = true;
		ausweis.objekt_strasse = "Mönckebergstraße";
		ausweis.objekt_plz = "22049";
		ausweis.objekt_ort = "Hamburg";
		ausweis.wohnflaeche = 152;
		ausweis.keller_beheizt = true;
		ausweis.dachgeschoss = Dachgeschoss.UNBEHEIZT;
		ausweis.energieverbrauch_zeitraum = moment("04.01.2018");
		ausweis.energietraeger_1 = "Erdgas";
		ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
		ausweis.versorgungssysteme = BitChecker(1);
		ausweis.fenster_dach = BitChecker(1);
		ausweis.daemmung = BitChecker(1);
		ausweis.objekt_typ = "Einfamilienhaus";
		ausweis.objekt_gebaeudeteil = "Gesamtgebäude";
		ausweis.lueftungskonzept = "Fensterlüftung";
		ausweis.wird_gekuehlt = false;
		ausweis.energieverbrauch_1_heizquelle_1 = 40120;
		ausweis.energieverbrauch_2_heizquelle_1 = 42120;
		ausweis.energieverbrauch_3_heizquelle_1 = 41120;
		ausweis.anzahl_vollgeschosse = 2;
		ausweis.geschosshoehe = 2.25;
		ausweis.anzahl_gauben = 1;
		ausweis.breite_gauben = 0.7;
		ausweis.masse_a = 4;
		ausweis.masse_b = 12;
		ausweis.masse_c = 3;
		ausweis.masse_d = 6;
		ausweis.masse_e = 4;
		ausweis.masse_f = 9;
		ausweis.fensterflaeche_so_sw = 8;
		ausweis.fensterflaeche_nw_no = 8;
		ausweis.aussenwandflaeche_unbeheizt = 15;
		ausweis.fenster_flaeche_1 = 16;
		ausweis.fenster_art_1 = 5;
		ausweis.fenster_flaeche_2 = 0;
		ausweis.fenster_art_2 = 5;
		ausweis.dachfenster_flaeche = 12;
		ausweis.dachfenster_art = 5;
		ausweis.haustuer_flaeche = 2;
		ausweis.haustuer_art = 5;
		ausweis.dach_bauart = "Massive Konstruktion";
		ausweis.dach_daemmung = 0;
		ausweis.decke_bauart = "Massive Konstruktion";
		ausweis.decke_daemmung = 0.02;
		ausweis.aussenwand_bauart = "Massive Konstruktion";
		ausweis.aussenwand_daemmung = 0.05;
		ausweis.boden_bauart = "Massive Konstruktion";
		ausweis.boden_daemmung = 0.08;
		ausweis.warmwasser_verteilung = "zvmzbis1978";
		ausweis.warmwasser_speicherung = "zwwsath";
		ausweis.warmwasser_erzeugung = "ktkesselbis1986";
		ausweis.heizung_zentral = false;
		ausweis.heizung_verteilung = "zv7055bis1978";
		ausweis.waerme_erzeugung_heizung = "ktkesselbis1986h";
		ausweis.heizung_speicherung = "elzs7055bis1994";
		ausweis.energietraeger_2 = "Braunkohle";
		ausweis.anteil_zusatzheizung = 0.7;
		ausweis = ausweis;
	}
</script>

<div class="flex flex-row gap-8 items-center mb-8">
	<div class="flex flex-col w-full">
		<h1>Bedarfsausweis erstellen - 75€</h1>
		<Progressbar progress={0} />
	</div>

	<PerformanceScore {ausweis} />
</div>

<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
	<fieldset
		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
	>
		<div class="flex flex-row justify-between">
			<a class="button" href="/speichern">Später Weitermachen</a>
			<div class="flex gap-4">
				<Hilfe />
				<button
					on:click={automatischAusfüllen}
					type="button"
					class="button">Automatisch Ausfüllen</button
				>
			</div>
		</div>

		<hr />
		<Label>A - Prüfung der Ausweisart</Label>
		<Ausweisart bind:ausweis />
		<hr />
		<Label
			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp
			und Gebäudeteil</Label
		>
		<div class="GRB">
			<div>
				<HelpLabel title="Straße, Hausnummer *"
					>Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
					ein.</HelpLabel
				>
				<div>
					<input
						name="objekt_strasse"
						class=" strasse"
						type="text"
						bind:value={ausweis.objekt_strasse}
						required
					/>
				</div>
			</div>

			<ZipSearch
				bind:zip={ausweis.objekt_plz}
				bind:city={ausweis.objekt_ort}
				name="zip"
			/>

			<div>
				<HelpLabel title="Ort *"
					>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
				>
				<div>
					<input
						name="objekt_ort"
						type="text"
						bind:value={ausweis.objekt_ort}
					/>
				</div>
			</div>

			<div>
				<HelpLabel title="Wohnfläche m² *"
					>Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
					Dabei handelt es sich um die Wohnfläche abzüglich
					vorhandener Flächen die sich außerhalb des Gebäudes
					befinden. (Balkone, Terassen,etc.).</HelpLabel
				>
				<div>
					<input
						name="wohnflaeche"
						type="number"
						required
						bind:value={ausweis.wohnflaeche}
					/>
				</div>
			</div>

			<div>
				<HelpLabel title="Gebäudetyp *"
					>Bitte wählen Sie hier den Gebäudetyp aus.
				</HelpLabel>
				<div>
					<select
						name="objekt_typ"
						bind:value={ausweis.objekt_typ}
						required
					>
						<option>Bitte auswählen</option>
						<option value="Einfamilienhaus">
							Einfamilienhaus</option
						>
						<option value="Freistehendes Einfamilienhaus">
							Freistehendes Einfamilienhaus</option
						>
						<option value="Freistehendes Zweifamilienhaus">
							Freistehendes Zweifamilienhaus</option
						>
						<option value="Doppelhaushälfte">
							Doppelhaushälfte</option
						>
						<option value="Reihenendhaus"> Reihenendhaus</option>
						<option value="Reihenmittelhaus">
							Reihenmittelhaus</option
						>
						<option value="Mehrfamilienhaus">
							Mehrfamilienhaus</option
						>
						<option value="Wohn- und Geschäftshaus">
							Wohn- und Geschäftshaus</option
						>
						<option value="Atrium-Bungalow">
							Atrium-Bungalow</option
						>
						<option value="Winkelbungalow"> Winkelbungalow</option>
					</select>
				</div>
			</div>

			<div>
				<HelpLabel title="Gebäudeteil *"
					>Bitte geben Sie hier den Gebäudeteil ein. In den meisten
					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
					handeln, so sollten 2 Ausweise erstellt werden. In diesem
					Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
					'Gewerbe'.</HelpLabel
				>
				<div>
					<select
						name="objekt_gebaeudeteil"
						bind:value={ausweis.objekt_gebaeudeteil}
						required
					>
						<option>Bitte auswählen</option>
						<option value="Gesamtgebäude"> Gesamtgebäude</option>
						<option value="Wohnen"> Wohnen</option>
					</select>
				</div>
			</div>
		</div>

		<hr />
		<Label
			>C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und
			Gebäudevolumen</Label
		>
		<div class="grid grid-cols-[3fr_2fr] gap-4">
			<div class="GRB3 gap-4">
				<HelpLabel
					title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
					>Hier wählen Sie Ihren passenden Grundriss aus, und tragen
					die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
					nur den Grundriss der zum beheizten Gebäude gehört. Garagen
					oder Schuppen die an das Haus herangebaut sind aber keine
					Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
				>

				<div class="grid grid-cols-4 gap-4">
					<div>
						<HelpLabel title="Anzahl Vollgeschosse *"
							>Bitte geben Sie hier die Anzahl der Vollgeschosse
							an. Keller und Dachgeschoss mit Schrägen zählen
							nicht dazu.</HelpLabel
						>
						<input
							name="anzahl_vollgeschosse"
							bind:value={ausweis.anzahl_vollgeschosse}
							type="number"
							required
						/>
					</div>

					<div>
						<HelpLabel title="Geschosshöhe *"
							>Bitte geben Sie hier die Geschosshöhe (lichte
							Raumhöhe + Deckenstärke) des Gebäudes ein. Bei
							unterschiedlichen Geschosshöhen bilden Sie einen
							Mittelwert.</HelpLabel
						>
						<select
							name="geschosshoehe"
							bind:value={ausweis.geschosshoehe}
							required
						>
							<option>Bitte auswählen</option>
							{#each arrayRange(2.1, 4.5, 0.1) as step}
								<option value={step}>{step.toFixed(2)} m</option
								>
							{/each}
						</select>
					</div>

					<div>
						<HelpLabel title="Gaubenanzahl"
							>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
							die Anzahl ein.</HelpLabel
						>
						<input
							name="anzahl_gauben"
							bind:value={ausweis.anzahl_gauben}
							type="number"
						/>
					</div>

					<div>
						<HelpLabel title="Breite aller Gauben in m"
							>Bitte geben Sie hier die Gesamtbreite aller Gauben
							in m ein.</HelpLabel
						>
						<select
							name="breite_gauben"
							bind:value={ausweis.breite_gauben}
						>
							<option>Bitte auswählen</option>
							{#each arrayRange(0.5, 10, 0.1) as step}
								<option value={step}>{step.toFixed(2)} m</option
								>
							{/each}
						</select>
					</div>
				</div>

				<div class="grid grid-cols-4 gap-4">
					<img src="/images/r.png" alt="rechteck" />
					<img src="/images/l.png" alt="l-form" />
					<img src="/images/t.png" alt="t-form" />
					<img src="/images/u.png" alt="u-form" />
				</div>

				<div class="grid grid-cols-6 gap-4">
					<div>
						<HelpLabel title="A"
							>Bitte Eingabe in m. Punkt statt Komma verwenden
							z.B.: 10.40 (Eingabebeispiel)</HelpLabel
						>
						<input
							name="masse_a"
							type="number"
							bind:value={ausweis.masse_a}
						/>
					</div>
					<div>
						<Label>B</Label>
						<input
							name="masse_b"
							type="number"
							bind:value={ausweis.masse_b}
						/>
					</div>
					<div>
						<Label>C</Label>
						<input
							name="masse_c"
							type="number"
							bind:value={ausweis.masse_c}
						/>
					</div>
					<div>
						<Label>D</Label>
						<input
							name="masse_d"
							type="number"
							bind:value={ausweis.masse_d}
						/>
					</div>
					<div>
						<Label>E</Label>
						<input
							name="masse_e"
							type="number"
							bind:value={ausweis.masse_e}
						/>
					</div>
					<div>
						<Label>F</Label>
						<input
							name="masse_f"
							type="number"
							bind:value={ausweis.masse_f}
						/>
					</div>
				</div>

				<div class="grid grid-cols-3 gap-4">
					<div>
						<Label>Fensterfläche Südost bis Südwest in m²</Label>
						<input
							name="fensterflaeche_so_sw"
							bind:value={ausweis.fensterflaeche_so_sw}
							type="number"
						/>
					</div>
					<div>
						<Label>Fensterfläche Nordwest bis Nordost in m²</Label>
						<input
							name="fensterflaeche_nw_no"
							bind:value={ausweis.fensterflaeche_nw_no}
							type="number"
						/>
					</div>
					<div>
						<Label>Außenwandfläche an unbeheizten Vorbau</Label>
						<input
							name="aussenwandflaeche_unbeheizt"
							bind:value={ausweis.aussenwandflaeche_unbeheizt}
							type="number"
						/>
					</div>
				</div>
			</div>
			<div class="GRB3">
				<HelpLabel title="Außenflächen, U-Werte und Volumen"
					>Die wärmeübertragende Umfassungsflächen sind die
					Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
					an unbeheizte Vorbauten grenzen. Wenn Ihnen die
					Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
					Sie die Eingabe direkt vornehmen. Hier können Sie auch das
					von den Umfassungsflächen eingeschlossene Volumen des
					Gebäudes eingeben. Die ermittelten Werte der
					Berechnungshilfe können hier präzisiert werden.</HelpLabel
				>
				<div class="flex flex-row items-center gap-4">
					<Label>Tabellenwerte manuell ändern</Label>
					<input
						type="checkbox"
						bind:checked={ausweis.tabellenwerte_aendern}
						name="tabellenwerte_aendern"
					/>
				</div>

				<div class="grid grid-cols-2 gap-4">
					<div>
						<Label>Dachfläche in m²</Label>
						<input
							name="dachflaeche"
							bind:value={ausweis.dachflaeche}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
					<div>
						<Label>U-Wert in W/m²K</Label>
						<input
							name="dach_u_wert"
							bind:value={ausweis.dach_u_wert}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
				</div>

				<div class="grid grid-cols-2 gap-4">
					<div>
						<Label>Geschoßdecke in m²</Label>
						<input
							name="deckenflaeche"
							bind:value={ausweis.deckenflaeche}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
					<div>
						<Label>U-Wert in W/m²K</Label>
						<input
							name="decke_u_wert"
							bind:value={ausweis.decke_u_wert}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
				</div>

				<div class="grid grid-cols-2 gap-4">
					<div>
						<Label>Außenwand in m²</Label>
						<input
							name="aussenwand_flaeche"
							bind:value={ausweis.aussenwand_flaeche}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
					<div>
						<Label>U-Wert in W/m²K</Label>
						<input
							name="aussenwand_u_wert"
							bind:value={ausweis.aussenwand_u_wert}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
				</div>

				<div class="grid grid-cols-2 gap-4">
					<div>
						<Label>Fußboden in m²</Label>
						<input
							name="fussboden_flaeche"
							bind:value={ausweis.fussboden_flaeche}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
					<div>
						<Label>U-Wert in W/m²K</Label>
						<input
							name="fussboden_u_wert"
							bind:value={ausweis.fussboden_u_wert}
							readonly={!ausweis.tabellenwerte_aendern}
							type="number"
						/>
					</div>
				</div>

				<div>
					<Label
						>Das von den Flächen eingeschlossene Gebäudevolumen in
						m³</Label
					>
					<input
						name="volumen"
						type="number"
						bind:value={ausweis.volumen}
						readonly={!ausweis.tabellenwerte_aendern}
					/>
				</div>

				<div>
					<Label>Blower-Door-Test erfolgreich durchgeführt</Label>
					<div class="flex flex-row gap-4">
						<label class="radio-inline"
							><input
								type="radio"
								value={true}
								bind:group={ausweis.dicht}
								name="dichtheit"
							/>Ja</label
						>
						<label class="radio-inline"
							><input
								type="radio"
								value={false}
								bind:group={ausweis.dicht}
								name="dichtheit"
							/>Nein</label
						>
					</div>
				</div>
			</div>
		</div>
		<hr />
		<Label
			>D - Eingabe der Fensterflächen und Konstruktion von Dach, Wänden
			und Boden</Label
		>
		<div class="box grid grid-cols-4 gap-4">
			<div>
				<HelpLabel title="Fensterfläche 1 in m² *"
					>Bitte geben Sie hier die Fläche der Fenster ein.</HelpLabel
				>
				<input
					name="fenster_flaeche_1"
					bind:value={ausweis.fenster_flaeche_1}
					type="number"
					required
					placeholder="0"
				/>
			</div>

			<div>
				<HelpLabel title="Art der Fenster *"
					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
				>
				<select name="fenster_art_1" bind:value={ausweis.fenster_art_1}>
					<option>bitte auswählen</option>
					{#each Object.entries(fensterArten) as [name, value]}
						<option {value}>{name}</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Fensterfläche 2 in m² *"
					>Wenn vorhanden geben Sie hier die Fläche der Fenster ein
					die älter sind oder einen anderen U-Wert besitzen.</HelpLabel
				>
				<input
					name="fenster_flaeche_2"
					type="number"
					bind:value={ausweis.fenster_flaeche_2}
				/>
			</div>

			<div>
				<HelpLabel title="Art der Fenster *"
					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
				>
				<select
					name="fenster_art_2"
					bind:value={ausweis.fenster_art_2}
					required
				>
					<option>bitte auswählen</option>
					{#each Object.entries(fensterArten) as [name, value]}
						<option {value}>{name}</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Dachfenster in m² *"
					>Bitte geben Sie hier die Fläche der Dachfenster ein.</HelpLabel
				>
				<input
					name="dachfenster_flaeche"
					type="number"
					bind:value={ausweis.dachfenster_flaeche}
				/>
			</div>

			<div>
				<HelpLabel title="Art der Dachfenster *"
					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
				>
				<select
					name="dachfenster_art"
					bind:value={ausweis.dachfenster_art}
				>
					<option>bitte auswählen</option>
					{#each Object.entries(fensterArten) as [name, value]}
						<option {value}>{name}</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Haustür in m² *"
					>Bitte geben Sie hier die Fläche der Haustür ein.</HelpLabel
				>
				<input
					name="haustuer_flaeche"
					type="number"
					bind:value={ausweis.haustuer_flaeche}
				/>
			</div>

			<div>
				<HelpLabel title="Art der Tür *"
					>Bitte geben Sie hier die Art der Haustür ein.</HelpLabel
				>
				<select
					name="haustuer_art"
					bind:value={ausweis.haustuer_art}
					required
				>
					<option>bitte auswählen</option>
					<option value="1.8">Standard (U-Wert 1,8)</option>
					<option value="5">Ganz alte Tür (U-Wert 5,0)</option>
					<option value="2.7">U-Wert 2,7</option>
					<option value="3">U-Wert 3,0</option>
					<option value="4.3">U-Wert 4,3</option>
					<option value="1.1">U-Wert 1,1</option>
					<option value="0.9">U-Wert 0,9</option>
					<option value="0.85">U-Wert 0,85</option>
					<option value="0.7">Passivhaustür (U-Wert 0,7)</option>
					<option value="0.6">Passivhaustür (U-Wert 0,6)</option>
					<option value="2.3">U-Wert 2,3</option>
					<option value="1.6">U-Wert 1,6</option>
					<option value="1.7">U-Wert 1,7</option>
					<option value="1.3">U-Wert 1,3</option>
					<option value="1">U-Wert 1,0</option>
				</select>
			</div>
		</div>

		<hr />
		<div class="box grid grid-cols-4 gap-4">
			<div>
				<HelpLabel title="Bauart Dachfläche *"
					>Bitte geben Sie hier die Bauart der Dachfläche ein.</HelpLabel
				>
				<select
					name="dach_bauart"
					bind:value={ausweis.dach_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>
			</div>

			<div>
				<HelpLabel title="nachträgliche Dämmung"
					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
				>
				<select
					name="dach_daemmung"
					bind:value={ausweis.dach_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Bauart Geschossdecke *"
					>Bitte geben Sie hier die Bauart der Geschossdecke ein.</HelpLabel
				>
				<select
					name="decke_bauart"
					bind:value={ausweis.decke_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>
			</div>

			<div>
				<HelpLabel title="nachträgliche Dämmung"
					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
				>
				<select
					name="decke_daemmung"
					bind:value={ausweis.decke_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Bauart Außenwand *"
					>Bitte geben Sie hier die Bauart der Außenwand ein.</HelpLabel
				>
				<select
					name="aussenwand_bauart"
					bind:value={ausweis.aussenwand_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>
			</div>

			<div>
				<HelpLabel title="nachträgliche Dämmung"
					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
				>
				<select
					name="aussenwand_daemmung"
					bind:value={ausweis.aussenwand_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Bauart Fußboden *"
					>Bitte geben Sie hier die Bauart des Fußbodens ein.</HelpLabel
				>
				<select
					name="boden_bauart"
					bind:value={ausweis.boden_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>
			</div>

			<div>
				<HelpLabel title="nachträgliche Dämmung"
					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
				>
				<select
					name="boden_daemmung"
					bind:value={ausweis.boden_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>
			</div>
		</div>

		<hr />
		<Label>E - Angabe zu Keller, Dachgeschoss, Lüftung und Kühlung</Label>
		<div class="box">
			<div class="grid grid-cols-4 gap-4 w-full">
				<div>
					<label class="control-label" for="keller_beheizt"
						>Keller *
					</label>
					<div>
						<select
							name="keller_beheizt"
							bind:value={ausweis.keller_beheizt}
							required
						>
							<option> Bitte auswählen</option>
							<option value={false}> nicht vorhanden</option>
							<option value={false}> unbeheizt</option>
							<option value={true}> beheizt</option>
						</select>
					</div>
				</div>

				<div>
					<label class="control-label" for="dachgeschoss"
						>Dachgeschoss *
					</label>
					<div>
						<select
							name="dachgeschoss"
							bind:value={ausweis.dachgeschoss}
							required
						>
							<option> Bitte auswählen</option>
							<option value={Dachgeschoss.NICHT_VORHANDEN}> nicht vorhanden</option>
							<option value={Dachgeschoss.UNBEHEIZT}> unbeheizt</option>
							<option value={Dachgeschoss.BEHEIZT}> beheizt</option>
						</select>
					</div>
				</div>

				<div>
					<HelpLabel title="Lüftung erfolgt durch:"
						>Bitte geben Sie hier ein ob über die Fenster natürlich
						belüftet wird oder über eine Lüftungsanlage.</HelpLabel
					>
					<div>
						<select
							name="lueftungskonzept"
							bind:value={ausweis.lueftungskonzept}
							required
						>
							<option> Bitte auswählen</option>
							<option value="Fensterlüftung">
								Fensterlüftung</option
							>
							<option value="Schachtlüftung">
								Schachtlüftung</option
							>
							<option
								value="Lüftungsanlage ohne Wärmerückgewinnung"
							>
								Lüftungsanlage ohne Wärmerückgewinnung</option
							>
							<option
								value="Lüftungsanlage mit Wärmerückgewinnung"
							>
								Lüftungsanlage mit Wärmerückgewinnung</option
							>
						</select>
					</div>
				</div>

				<div>
					<HelpLabel title="Anlage zur Kühlung"
						>Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
						gekühlt wird.</HelpLabel
					>
					<div>
						<select
							name="wird_gekuehlt"
							bind:value={ausweis.wird_gekuehlt}
							required
						>
							<option> Bitte auswählen</option>
							<option value={true}> vorhanden</option>
							<option value={false}> nicht vorhanden</option>
						</select>
					</div>
				</div>
			</div>

			<div>
				<HelpLabel
					title="Alternative Energieversorgungssyteme werden genutzt für"
					>Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.</HelpLabel
				>
				<div class="grid grid-cols-4 gap-4 w-full">
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="energiequelle_2_nutzung_1"
							bind:checked={ausweis.energiequelle_2_nutzung[0]}
							value="Heizung"
						/>Heizung</label
					>
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="energiequelle_2_nutzung_2"
							bind:checked={ausweis.energiequelle_2_nutzung[1]}
							value="Warmwasser"
						/>Warmwasser</label
					>
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="energiequelle_2_nutzung_3"
							bind:checked={ausweis.energiequelle_2_nutzung[2]}
							value="Lüftung"
						/>Lüftung</label
					>
					<label class="checkbox-inline"
						><input
							type="checkbox"
							name="energiequelle_2_nutzung_4"
							bind:checked={ausweis.energiequelle_2_nutzung[3]}
							value="Kühlung"
						/>Kühlung</label
					>
				</div>
			</div>
		</div>

		<hr />
		<Label>F - Eingabe der Heizungsanlage</Label>
		<div class="box grid grid-cols-4 gap-4">
			<div>
				<HelpLabel title="Energieträger *"
					>Bitte geben Sie hier den Energieträger der Heizung ein.</HelpLabel
				>
				<select
					name="energietraeger_1"
					bind:value={ausweis.energietraeger_1}
					required
				>
					<option>Bitte auswählen</option>
				</select>
			</div>

			<div>
				<HelpLabel title="Verteilung Warmwasser *"
					>Bitte geben Sie hier die Warmwasserverteilung ein.</HelpLabel
				>
				<select
					name="warmwasser_verteilung"
					bind:value={ausweis.warmwasser_verteilung}
				>
					<option>Bitte auswählen</option>
					<option value="zvmzbis1978"
						>zentrale Verteilung mit Zirkulation (bis 1978)</option
					>
					<option value="zvmzngbis1978"
						>zentrale Verteilung mit Zirkulation nachträglich
						gedämmt (bis 1978)</option
					>
					<option value="zvmzvon1979bis1994"
						>zentrale Verteilung mit Zirkulation (von 1979 - 1994)</option
					>
					<option value="zvmzab1995"
						>zentrale Verteilung mit Zirkulation (ab 1994)</option
					>
					<option value="zvozbis1978"
						>zentrale Verteilung ohne Zirkulation (bis 1978)</option
					>
					<option value="zvozngbis1978"
						>zentrale Verteilung ohne Zirkulation nachträglich
						gedämmt (bis 1978)</option
					>
					<option value="zvozvon1979bis1994"
						>zentrale Verteilung ohne Zirkulation (von 1979 - 1994)</option
					>
					<option value="zvozab1995"
						>zentrale Verteilung ohne Zirkulation (ab 1994)</option
					>
					<option value="dzsbis1994"
						>dezentrales System (bis 1994)</option
					>
					<option value="dzsab1995"
						>dezentrales System (ab 1995)</option
					>
				</select>
			</div>

			<div>
				<HelpLabel title="Speicherung Warmwasser"
					>Bitte geben Sie hier wenn vorhanden die Art des
					Warmwasserspeichers ein.</HelpLabel
				>
				<select
					name="warmwasser_speicherung"
					bind:value={ausweis.warmwasser_speicherung}
				>
					<option>Bitte auswählen</option>
					<option value="zwwsath"
						>zentrale Warmwasserspeicher außerhalb thermischer Hülle</option
					>
					<option value="zwwsith"
						>zentrale Warmwasserspeicher innerhalb thermischer Hülle</option
					>
					<option value="gasbs">gasbefeuerter Speicher</option>
					<option value="elks">Elektro-Kleinspeicher</option>
				</select>
			</div>

			<div>
				<HelpLabel title="Erzeugung Warmwasser *"
					>Bitte geben Sie hier die Wärmeerzeugung für Warmwasser ein.</HelpLabel
				>
				<select
					name="warmwasser_erzeugung"
					bind:value={ausweis.warmwasser_erzeugung}
					required
				>
					<option>Bitte auswählen</option>
					{#each hotWaterProductionTypes as type, i}
						<option value={i}>{type}</option>
					{/each}
				</select>
			</div>

			<div>
				<HelpLabel title="Übergabe Heizung *"
					>Bitte geben Sie hier ein ob es sich um Zentralheizung
					handelt oder über Beheizung durch dezentrale Einzelöfen.</HelpLabel
				>
				<select
					name="heizung_zentral"
					bind:value={ausweis.heizung_zentral}
				>
					<option>Bitte auswählen</option>
					<option value={true}>Zentralheizung</option>
					<option value={false}>Einzelfeuerstätte</option>
				</select>
			</div>

			<div>
				<HelpLabel title="Verteilung Heizung *"
					>Bitte geben Sie hier die Verteilung der Heizung ein.</HelpLabel
				>
				<select
					name="heizung_verteilung"
					bind:value={ausweis.heizung_verteilung}
				>
					<option>Bitte auswählen</option>
					<option value="zv7055bis1978"
						>zentrale Verteilung 70/55°C bis 1978</option
					>
					<option value="zv7055ngbis1978"
						>zentrale Verteilung 70/55°C, nachträglich gedämmt bis
						1978</option
					>
					<option value="zv7055von1979bis1994"
						>zentrale Verteilung 70/55°C von 1979 bis 1994</option
					>
					<option value="zv7055ab1995"
						>zentrale Verteilung 70/55°C ab 1995</option
					>
					<option value="zv5545bis1978"
						>zentrale Verteilung 55/45°C bis 1978</option
					>
					<option value="zv5545ngbis1978"
						>zentrale Verteilung 55/45°C, nachträglich gedämmt bis
						1978</option
					>
					<option value="zv5545von1979bis1994"
						>zentrale Verteilung 55/45°C von 1979 bis 1994</option
					>
					<option value="zv5545ab1995"
						>zentrale Verteilung 55/45°C ab 1995</option
					>
					<option value="wwvertbis1978"
						>Wohnungsweise Verteilung bis 1978</option
					>
					<option value="wwvertvon1979bis1994"
						>Wohnungsweise Verteilung von 1979 bis 1994</option
					>
					<option value="wwvertab1995"
						>Wohnungsweise Verteilung ab 1995</option
					>
					<option value="dezensys">dezentrales System</option>
				</select>
			</div>

			<div>
				<HelpLabel title="Speicherung Heizung"
					>Bitte geben Sie hier - wenn vorhanden - den Speicher der
					Heizung ein.</HelpLabel
				>
				<select
					name="heizung_speicherung"
					bind:value={ausweis.heizung_speicherung}
				>
					<option>Bitte auswählen</option>
					<option value="elzs7055bis1994"
						>El.-Zentralspeicher 70/55°C bis 1994</option
					>
					<option value="elzs7055ab1995"
						>El.-Zentralspeicher 70/55°C ab 1995</option
					>
					<option value="puffs5545bis1994"
						>Pufferspeicher El.-Wärmepumpe 55/45°C bis 1994</option
					>
					<option value="puffs5545ab1995"
						>Pufferspeicher El.-Wärmepumpe 55/45°C ab 1995</option
					>
					<option value="puffshk7055bis1994"
						>Pufferspeicher für Holzkessel 70/55°C bis 1994</option
					>
					<option value="puffshk7055ab1995"
						>Pufferspeicher für Holzkessel 70/55°C ab 1995</option
					>
				</select>
			</div>

			<div>
				<HelpLabel title="Wärmeerzeugung Heizung *"
					>Bitte geben Sie hier den Wärmerzeuger der Heizung ein.</HelpLabel
				>
				<select
					name="waerme_erzeugung_heizung"
					bind:value={ausweis.waerme_erzeugung_heizung}
					required
				>
					<option>Bitte auswählen</option>
					<option value="ktkesselbis1986h"
						>Konstanttemperatur-Kessel bis 1986</option
					>
					<option value="ktkesselvon1987bis1994h"
						>Konstanttemperatur-Kessel von 1987 bis 1994</option
					>
					<option value="ktkesselab1995h"
						>Konstanttemperatur-Kessel ab 1995</option
					>
					<option value="ntkesselbis1986h"
						>Niedertemperatur-Kessel bis 1986</option
					>
					<option value="ntkesselvon1987bis1994h"
						>Niedertemperatur-Kessel von 1987 bis 1994</option
					>
					<option value="ntkesselab1995h"
						>Niedertemperatur-Kessel ab 1995</option
					>
					<option value="bwkesselbis1986h"
						>Brennwert-Kessel bis 1986</option
					>
					<option value="bwkesselvon1987bis1994h"
						>Brennwert-Kessel von 1987 bis 1994</option
					>
					<option value="bwkesselab1995h"
						>Brennwert-Kessel ab 1995</option
					>
					<option value="bwkesselab1999h"
						>Brennwertkessel verbessert ab 1999</option
					>
					<option value="ewplhvon1979bis1994h"
						>Elektro-Wärmepumpe (Außenluft) von 1979 bis 1994</option
					>
					<option value="ewplhab1995h"
						>Elektro-Wärmepumpe (Außenluft) ab 1995</option
					>
					<option value="ewpemvon1979bis1994h"
						>Elektro-Wärmepumpe (Erdreich) von 1979 bis 1994</option
					>
					<option value="ewpemab1995h"
						>Elektro-Wärmepumpe (Erdreich) ab 1995</option
					>
					<option value="ewpgmvon1979bis1994h"
						>Elektro-Wärmepumpe (Grundwasser) von 1979 bis 1994</option
					>
					<option value="ewpgmab1995h"
						>Elektro-Wärmepumpe (Grundwasser) ab 1995</option
					>
					<option value="fwugsh">Fernwärme-Übergabestation</option>
					<option value="zesh">zentraler elektrischer Speicher</option
					>
					<option value="thermebis1994h"
						>Therme (Umlaufwasserheizer) bis 1994</option
					>
					<option value="thermeab1995h"
						>Therme (Umlaufwasserheizer) ab 1995</option
					>
					<option value="bthermeab1995h"
						>Brennwert-Therme ab 1995</option
					>
					<option value="oeleinzel"
						>ölbefeuerte Einzelöfen mit Verdampfungsbrenner</option
					>
					<option value="kheinzel">Kohle- oder Holzofen</option>
					<option value="greinzel">Gasraumheizer</option>
					<option value="elnseinzelbis1994"
						>Elektro-Nachtspeicherheizung bis 1994</option
					>
					<option value="elnseinzelab1995"
						>Elektro-Nachtspeicherheizung ab 1995</option
					>
					<option value="eldirekt">Elektro-Direktheizgerät</option>
				</select>
			</div>
		</div>

		<hr />
		<div class="box grid grid-cols-4 gap-4">
			<div>
				<HelpLabel title="Energieträger Zusatzheizung"
					>Bitte geben Sie hier - wenn vorhanden - die Zusatzheizung
					ein (z.B. Kamin, Pelletheizung).</HelpLabel
				>
				<select
					name="energietraeger_2"
					bind:value={ausweis.energietraeger_2}
					required
				>
					<option>Bitte auswählen</option>
				</select>
			</div>

			<div>
				<HelpLabel title="Anteil am Gesamtheizbedarf des Hauses"
					>Bitte geben Sie hier den prozentualen Anteil der
					Zusatzheizung ein.</HelpLabel
				>
				<select
					name="anteil_zusatzheizung"
					bind:value={ausweis.anteil_zusatzheizung}
				>
					<option value="0" selected
						>Anteil am Gesamtheizbedarf des Hauses</option
					>
					{#each arrayRange(0.01, 0.7, 0.01) as step}
						<option value={step}>{step * 100}%</option>
					{/each}
				</select>
			</div>
			<div>
				Wenn Sie ein Solarsystem für Warmwasser einsetzen geben Sie
				bitte die Kollektorfläche an:
			</div>
			<div class="form-group col-md-1">
				<Label>Eingabe in m²</Label>
				<input
					name="kollektor_flaeche"
					bind:value={ausweis.kollektor_flaeche}
					type="number"
				/>
			</div>
		</div>
		<hr />
		<Label
			>G - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
			Gebäudes</Label
		>
		<BilderZusatzsysteme {ausweis} />
		<hr />
		<div class="flex flex-row justify-between">
			<button class="button">Weiter</button>
		</div>
	</fieldset>
</form>
