<script lang="ts">
	import AnsichtsausweisButton from "#components/AnsichtsausweisButton.svelte";
	import DatenblattButton from "#components/DatenblattButton.svelte";
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import ImageGrid from "#components/ImageGrid.svelte";
	import {
	Enums,
	} from "#lib/client/prisma";

	import {
	AufnahmeClient,
	BedarfsausweisWohnenClient,
		ObjektClient,
		UploadedGebaeudeBild,
		VerbrauchsausweisGewerbeClient,
		VerbrauchsausweisWohnenClient,
	} from "./types.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
	export let aufnahme: AufnahmeClient;
	export let objekt: ObjektClient;
	export let images: UploadedGebaeudeBild[] = [];
	export let ausweisart: Enums.Ausweisart;
</script>

<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 mt-6">
	
	<div class="box mb-0 relative p-2 sm:px-8">

		
			<ImageGrid
				name={"gebaeude_image"}
				kategorie={Enums.BilderKategorie.Gebaeude}
				max={1}
				min={1}
				bind:objekt
				bind:images
				bind:ausweis
			>
		Wenn vorhanden können Sie hier ein Gebäudefoto (Außenansicht) hochladen. Dieses Bild erscheint auf Ihrem Energieausweis.
		</ImageGrid>
		

	</div>

	<div class="box mb-0 p-2 sm:px-8">
		<div class="input-standard">
			
			<input type="text"  
			value="Vorschau: Ausweis und Datenblatt"
			disabled
			/>
		
				<div class="help-label">
						<HelpLabel>
							Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
						</HelpLabel>
					</div>

		</div>

		<div class="grid grid-cols-1 xs:grid-cols-2 gap-4 mt-4">
			<AnsichtsausweisButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
			<DatenblattButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
		</div>

	</div>

</div>


<style lang="postcss">

</style>