<script lang="ts">
	import AnsichtsausweisButton from "#components/AnsichtsausweisButton.svelte";
	import DatenblattButton from "#components/DatenblattButton.svelte";
	import HelpLabel from "#components/HelpLabel.svelte";
	import ImageGrid from "../ImageGrid.svelte";
	import {
	Enums,
		type BedarfsausweisWohnen,
		type VerbrauchsausweisGewerbe,
	} from "@ibcornelsen/database/client";

	import {
		GebaeudeClient,
		UploadedGebaeudeBild,
		VerbrauchsausweisWohnenClient,
	} from "./types";

	export let ausweis:
		| VerbrauchsausweisWohnenClient
		| VerbrauchsausweisGewerbe
		| BedarfsausweisWohnen;
	export let gebaeude: GebaeudeClient;

	export let images: UploadedGebaeudeBild[] = [];
</script>

<div class="grid grid-cols-2 p-4 gap-4">
	<div class="rounded-lg border-4 p-4 bg-white">
		<div class="GRB4">
			<div class="form-group col-md-12 nopad">
				<HelpLabel title="Gebäudebild Bildupload :">
					Wenn vorhanden können Sie ein Gebäudefoto (Außenansicht)
					hochladen.
				</HelpLabel>
				<hr class="trenner_form_100" />
			</div>

			<ImageGrid
				name={"gebaeude_image"}
				kategorie={Enums.BilderKategorie.Gebaeude}
				max={1}
				bind:gebaeude
				bind:images
				bind:ausweis
			/>
		</div>
	</div>

	<div class="rounded-lg border-4 p-4 bg-white">
		<HelpLabel title="Ansichtsausweis & Datenblatt :">
			Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
		</HelpLabel>
		<hr class="trenner_form_100" />

		<div class="flex flex-row gap-4">
			<AnsichtsausweisButton {ausweis} {gebaeude} />
			<DatenblattButton {ausweis} {gebaeude} />
		</div>
	</div>
</div>
