<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";

	import HeizungImage from "./HeizungImage.svelte";
	import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
	import DaemmungImage from "./DaemmungImage.svelte";
	import FensterImage from "./FensterImage.svelte";

	//import Label from "../Label.svelte";

	import {
		AufnahmeClient,
		ObjektClient,
		UploadedGebaeudeBild,
		VerbrauchsausweisWohnenClient,
	} from "./types.js";
	import { boolean } from "astro:schema";
	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";

	export let gebaeude: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let ausweis: VerbrauchsausweisWohnenClient;
	export let images: UploadedGebaeudeBild[];
</script>

<div
	id="sanierungszustand"
	class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-2

sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
md:grid-cols-2 md:gap-x-6 md:gap-y-8

xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2

"
>
	<SanierungsOption
		label="Zentral/Etage"
		name="zentralheizung"
		help="Bitte anklicken wenn die Heizwärme <b>zentral erzeugt</b> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu."
		value="ZH"
		bind:checked={aufnahme.zentralheizung}
	></SanierungsOption>
	<SanierungsOption
		label="Einzelofen"
		name="einzelofen"
		help="Bei <b>dezentraler Erzeugung</b> in den Räumen wie z.B. Nachtspeicher, Kami- oder Kachelofen. Dezentrale Klimageräte zur Wärmeerzeugung gehören auch dazu."
		value="EO"
		bind:checked={aufnahme.einzelofen}
	></SanierungsOption>
	<SanierungsOption
		label="Durchlauferhitzer (elektrisch)"
		name="durchlauf_erhitzer"
		help="Wenn <b>dezentrale</b> elektrische <b>Warmwassererzeugung</b> vorhanden ist"
		value="DH"
		bind:checked={aufnahme.durchlauf_erhitzer}
	></SanierungsOption>
	<SanierungsOption
		label="Standardkessel"
		name="standard_kessel"
		help="Gemeint sind Konstanttemperaturkessel und ältere Gebläse- oder Feststoffkessel"
		value="SK"
		bind:checked={aufnahme.standard_kessel}
	></SanierungsOption>
	<SanierungsOption
		label="Solarsystem für Warmwasser"
		name="solarsystem_warmwasser"
		help="Solarpanele auf dem Dach zur <b>alternativen Warmwassererzeugung</b> aus Sonnenenergie. Nicht zu verwechseln mit Photovoltaik."
		value="SSWW"
		bind:checked={aufnahme.solarsystem_warmwasser}
	></SanierungsOption>
	<SanierungsOption
		label="Wärmepumpe"
		name="waermepumpe"
		help="Elektrisch betriebener Wärmerzeuger der thermische Energie aus natürlichen Wärmequellen wie der <b>Umgebungsluft, dem Erdreich oder Grundwasser</b> nutzbar macht."
		value="WP"
		bind:checked={aufnahme.waermepumpe}
	></SanierungsOption>
	<SanierungsOption
		label="Niedertemperaturkessel"
		name="niedertemperatur_kessel"
		help="Heizkessel der mit <b>niedrigen Vorlauftemperaturen</b> (35-75 °C) arbeitet. Im Vergleich zum Brennwertkessel ist er weniger effizient, wird aber noch in älteren Heizsystemen eingesetzt."
		value="NK"
		bind:checked={aufnahme.niedertemperatur_kessel}
	></SanierungsOption>
	<SanierungsOption
		label="Brennwertkessel"
		name="brennwert_kessel"
		help="Hat einen besonders <b>hohen Wirkungsgrad</b> weil er die im Abgas enthaltene Kondensationswärme zurückgewinnt. Auch zu erkennen am doppelwandigem Abgasrohr welches sich nicht erhitzt."
		value="BWK"
		bind:checked={aufnahme.brennwert_kessel}
	></SanierungsOption>
	<SanierungsOption
		label="Warmwasserrohre gedämmt"
		name="warmwasser_rohre_gedaemmt"
		help="Gemeint sind die sichtbaren Rohre des Verteilsystems Warmwasser. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen."
		value="BWK"
		bind:checked={aufnahme.warmwasser_rohre_gedaemmt}
	></SanierungsOption>
	<SanierungsOption
		label="Heizungsrohre gedämmt"
		name="heizungsrohre_gedaemmt"
		help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen.ext"
		value="HRGD"
		bind:checked={aufnahme.heizungsrohre_gedaemmt}
	></SanierungsOption>
	<SanierungsOption
		label="Zirkulation"
		name="zirkulation"
		help="Kreislauf von Heizungs- oder Warmwasser <b>innerhalb eines Leitungssystems</b>, um eine gleichmäßige Wärmeverteilung sicherzustellen."
		value="ZK"
		bind:checked={aufnahme.zirkulation}
	></SanierungsOption>
	<SanierungsOption
		label="Photovoltaik auf dem Dach"
		name="photovoltaik"
		help="Direkte Umwandlung von Sonnenlicht in <b>elektrische Energie</b> mittels Solarzellen, die den photoelektrischen Effekt nutzen."
		value="PV"
		bind:checked={aufnahme.photovoltaik}
	></SanierungsOption>
</div>

<HeizungImage bind:images bind:ausweis bind:gebaeude />

<!--
	<HelpLabel title="Heizungsanlage (bitte immer zutreffendes ankreuzen) *">
		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
		einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend. Das
		seit Mai 2021 gültige GEG erfordert eine genauere Prüfung anhand von
		Fotos. Bitte laden Sie ein oder mehrere Fotos der Heizungsanlage bzw.
		des Heizungsraums hoch.
	</HelpLabel>
	<hr />

<hr />

<HeizungImage bind:images bind:ausweis bind:gebaeude />

<hr />

<div class="GRB3">
	<HelpLabel
		title="Fenster/Dachfenster/Türen (bitte zutreffendes ankreuzen):*"
	>
		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
		einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend.
	</HelpLabel>
	<hr />

	<div class="grid grid-cols-4">
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="einfach_verglasung"
					bind:checked={aufnahme.einfach_verglasung}
					value="EG"
				/>Einfachglas</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="doppel_verglasung"
					bind:checked={aufnahme.doppel_verglasung}
					value="DF"
				/>Doppelverglasung</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="isolier_verglasung"
					bind:checked={aufnahme.isolier_verglasung}
					value="IVG"
				/>Isolierverglasung</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="dreifach_verglasung"
					bind:checked={aufnahme.dreifach_verglasung}
					value="PHF"
				/>Dreifachverglasung</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="fenster_dicht"
					bind:checked={aufnahme.fenster_dicht}
					value="FD"
				/>Alle Fenster dicht</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="fenster_teilweise_undicht"
					bind:checked={aufnahme.fenster_teilweise_undicht}
					value="FTUD"
				/>Fenster teilweise undicht</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="tueren_dicht"
					bind:checked={aufnahme.tueren_dicht}
					value="TD"
				/>Alle Türen dicht</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="tueren_undicht"
					bind:checked={aufnahme.tueren_undicht}
					value="TUD"
				/>Türen teilweise undicht</label
			>
		</div>
		<div class="form-group col-md-3">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="rolllaeden_kaesten_gedaemmt"
					bind:checked={aufnahme.rolllaeden_kaesten_gedaemmt}
					value="RKD"
				/>Rollladenkästen gedämmt, luftdicht</label
			>
		</div>
	</div>
</div>

<hr />

<FensterImage bind:images bind:ausweis bind:gebaeude />

<hr />

<div class="GRB3">
	<div class="form-group col-md-12">
		<HelpLabel title="Wärmedämmung (bitte zutreffendes ankreuzen) *">
			Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
			einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend.
			Das seit Mai 2021 gültige GEG erfordert eine genauere Prüfung anhand
			von Fotos. Bitte laden Sie ein oder mehrere Fotos der Außenwand und
			des Dachbereiches hoch.
		</HelpLabel>
		<hr />
	</div>

	<div class="grid grid-cols-4">
		<div class="form-group col-md-3 mw1">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="aussenwand_gedaemmt"
					bind:checked={aufnahme.aussenwand_gedaemmt}
					value="AWD"
				/>Außenwand gedämmt</label
			>
		</div>
		<div class="form-group col-md-3 mw1">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="keller_wand_gedaemmt"
					bind:checked={aufnahme.keller_wand_gedaemmt}
					value="KWD"
				/>Kelleraußenwand gedämmt</label
			>
		</div>
		<div class="form-group col-md-3 mw1">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="keller_decke_gedaemmt"
					bind:checked={aufnahme.keller_decke_gedaemmt}
					value="KDD"
				/>Kellerdecke gedämmt</label
			>
		</div>
		<div class="form-group col-md-3 mw1">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="dachgeschoss_gedaemmt"
					bind:checked={aufnahme.dachgeschoss_gedaemmt}
					value="DGD"
				/>Dachgeschoss gedämmt</label
			>
		</div>
		<div class="form-group col-md-3 mw1">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="oberste_geschossdecke_gedaemmt"
					bind:checked={aufnahme.oberste_geschossdecke_gedaemmt}
					value="OGDDW"
				/>Oberste Geschossdecke gedämmt</label
			>
		</div>
		<div class="form-group col-md-6 mw1">
			<label class="checkbox-inline"
				><input
					type="checkbox"
					class="checkbox"
					name="oberste_geschossdecke_min_12cm_gedaemmt"
					bind:checked={aufnahme.oberste_geschossdecke_min_12cm_gedaemmt}
					value="OGDD"
				/>Oberste Geschossdecke min. 12cm gedämmt</label
			>
		</div>
	</div>
</div>

<hr />

<DaemmungImage bind:images bind:ausweis bind:gebaeude />

<hr />

<Label
	>H - Hier können Sie ein Gebäudebild hochladen und sich Ihren Energieausweis
	als PDF anschauen</Label
>

<AusweisPreviewContainer bind:images bind:ausweis bind:gebaeude />

-->

<style lang="postcss">
</style>
