<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import { AufnahmeClient } from "./types.js";

	export let aufnahme: AufnahmeClient;
</script>

<div
	id="lueftungundleerstand"
	class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>
	<!-- Gebäudeteil -->

	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
		<div class="input-standard">
			<Inputlabel title="Gebäudeteil *"></Inputlabel>

			<select
				name="gebaeudeteil"
				data-test="gebaeudeteil"
				bind:value={aufnahme.gebaeudeteil}
				required
			>
				<option disabled selected value>Bitte auswählen</option>
				<option value="Gesamtgebäude">Gesamtgebäude</option>
				<option value="Wohnen">Wohnen</option>
			</select>

			<div class="help-label">
				<HelpLabel>
					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>
		</div>

		<div class="input-standard">
			<Inputlabel title="Leerstand in %"></Inputlabel>

			<input
				name="leerstand"
				data-test="leerstand"
				maxlength="2"
				type="number"
				bind:value={aufnahme.leerstand}
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
					wären dann ca. 11%.
				</HelpLabel>
			</div>
		</div>
	</div>

	<!-- Lüftung -->

	<div class="input-standard order-2 md:order-2 xl:order-2">
		<Inputlabel title="Lüftung durch *"></Inputlabel>

		<select
			name="lueftung"
			data-test="lueftung"
			required
			bind:value={aufnahme.lueftung}
		>
			<option disabled selected value={null}>Bitte auswählen</option>
			<option value="Fensterlueftung">Fensterlüftung</option>
			<option value="Schachtlueftung">Schachtlüftung</option>
			<option value="LueftungsanlageOhneWaermerueckgewinnung"
				>Lüftungsanlage ohne Wärmerückgewinnung</option
			>
			<option value="LueftungsanlageMitWaermerueckgewinnung"
				>Lüftungsanlage mit Wärmerückgewinnung</option
			>
		</select>

		<div class="help-label">
			<HelpLabel>
				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 Bitte geben Sie
				hier ein ob über die Fenster natürlich belüftet wird oder über
				eine Lüftungsanlage.
			</HelpLabel>
		</div>
	</div>

	<!-- Kühlung -->

	<div class="input-standard order-2 md:order-2 xl:order-2">
		<Inputlabel title="Anlage Kühlung *"></Inputlabel>

		<select
			name="kuehlung"
			data-test="kuehlung"
			required
			bind:value={aufnahme.kuehlung}
		>
			<option disabled selected value>Bitte auswählen</option>
			<option value="1">vorhanden</option>
			<option value="0">nicht vorhanden</option>
		</select>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie an ob das Gebäude im Sommer zusätzlich gekühlt
				wird.
			</HelpLabel>
		</div>
	</div>
</div>
