<script lang="ts">
	import ImageGrid from "../ImageGrid.svelte";;
	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";

	export let images: UploadedGebaeudeBild[] = [];
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
	export let gebaeude: GebaeudeClient;
</script>

<div class="grid grid-cols-2 gap-4">
	<div class="rounded-lg border-4 p-4 bg-white">
		<input type="file" class="image_upload" name="daemmung[]" multiple />

		<p class="font-bold mb-2">
			<span class="text-red-500">WICHTIG:</span>
			Bild Upload - Wärmedämmung (2 bis 4 Bilder)
		</p>

		<p>
			Seit Mai 2021 wird das neue Gebäudeenergiegesetz (GEG) in
			Deutschland angewendet. Daher werden von nun an Bilder vom Gebäude
			zur Einschätzung der Modernisierungsempfehlungen benötigt. Hierfür
			müssen laut Gesetzgeber Detailbilder vom Sanierungszustand bzw. der
			Gebäudehülle und der Anlagentechnik (Wärmeerzeuger etc.) zur
			Verfügung gestellt werden. Diese Bilder erscheinen nicht auf Ihrem
			Energieausweis.
		</p>
		<br />
		<ol>
			<li>1.Bild : Detailbild Dach bzw. des Dachinnenraums*</li>
			<li>
				2.Bild : <em
					>(weiteres Detailbild Dach bzw. des Dachinnenraums)</em
				>
			</li>
			<li>3.Bild : Detailbild der Außenwand*</li>
			<li>
				4.Bild : <em>(weiteres Detailbild der Außenwand)</em>
			</li>
		</ol>
		<p>* erforderliches Bild</p>
		<br />
		<p>
			Idealerweise sollte Dämmung oder nicht vorhandene Dämmung gut zu
			erkennen sein. Sollte aufgrund der Verkleidung bzw. Verschalung, der
			Dämmzustand nicht erkennbar sein, reicht ein Bild vom ausgebauten
			Dachgeschoss und/oder ein Außenbild vom Dach-Wandanschluss. Sollte
			beim Detailbild der Außenwand aufgrund des Wandaufbaus die Dämmung
			nicht erkennbar sein, reicht ein normales Bild der Außenwand
			und/oder vom Dach-Wandanschluss.
		</p>
	</div>

	<div class="rounded-lg border-4 p-4 bg-white">
		<p>
			Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
			Energieausweis!<br />
			<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
		</p>
		<ImageGrid max={4} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
	</div>
</div>
