<script lang="ts">
	import { AufnahmeKomplettClient, BenutzerClient } from "#components/Ausweis/types.js";
	import Carousel from "#components/Carousel.svelte";
	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
	import { Objekt } from "#lib/client/prisma";
	import { ChevronLeft, ChevronRight, Plus } from "radix-svelte-icons";

	export let user: BenutzerClient;
	export let aufnahme: AufnahmeKomplettClient;
	export let objekt: Objekt;
</script>

<h1 class="text-4xl font-medium mb-8">{objekt.adresse}, {objekt.plz} {objekt.ort}</h1>

<div class="bg-white rounded-lg">
	{#if aufnahme.bilder.length > 0}
		<Carousel perPage={1}>
				{#each aufnahme.bilder as bild, i (i)}
					<img src="/bilder/{bild.uid}.jpg" alt={bild.kategorie} class="max-h-[60vh] h-full w-full object-contain">
				{/each}
			<span slot="left-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronLeft size={24}></ChevronLeft></span>
			<span slot="right-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronRight size={24}></ChevronRight></span>
		</Carousel>
	{/if}
</div>

<div class="flex flex-row gap-4">
	<button class="button flex flex-row rounded-lg gap-2"><Plus size={20}></Plus> Verbrauchsausweis Wohnen Erstellen</button>
	<button class="button flex flex-row rounded-lg gap-2"><Plus size={20}></Plus> Verbrauchsausweis Gewerbe Erstellen</button>
	<button class="button flex flex-row rounded-lg gap-2"><Plus size={20}></Plus> Bedarfsausweis Erstellen</button>

</div>

<div class="my-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
	{#each aufnahme.verbrauchsausweise_wohnen as ausweis}
		<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
	{/each}
	{#each aufnahme.bedarfsausweise_wohnen as ausweis}
		<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
	{/each}
	{#each aufnahme.verbrauchsausweise_gewerbe as ausweis}
		<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
	{/each}
</div>