<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="fenster[]" multiple />

		<p class="font-bold mb-2">
			<span class="text-red-500">WICHTIG:</span>
			Bild Upload - Fenster/Dachfenster/Türen (1 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 : Exemplarisches Bild eines Fensters*</li>
			<li>
				2.Bild : <em>(Im Baualter abweichendes Fenster)</em>
			</li>
			<li>
				3.Bild : <em>(Im Baualter abweichendes Fenster)</em>
			</li>
			<li>
				4.Bild : <em>(wenn möglich, Bild der Haustür)</em>
			</li>
		</ol>
		<p>* erforderliches Bild</p>
		<br />
		<p>
			Wenn eine Fensterart bzw. Fensterqualität verbaut wurde, reicht ein
			exemplarisches Bild, sonst pro Art ein Bild. Wenn möglich eine
			Großaufnahme des Fensters bzw. des Fensterfalzes. Idealerweise
			sollte der Datumsaufdruck am Verglasungsrahmen zu erkennen sein.
		</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. 1 Bild hoch:</strong>
		</p>
		<ImageGrid max={4} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
	</div>
</div>
