<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 DashboardNachweis from "#components/Dashboard/DashboardNachweis.svelte";
	import { Objekt } from "#lib/client/prisma.js";
	import { ChevronLeft, ChevronRight } from "radix-svelte-icons";

	export let user: BenutzerClient;
	export let aufnahme: AufnahmeKomplettClient;
	export let objekt: Objekt;
	export let benutzer: BenutzerClient;

		
	let dropdownOpen = false;

	function toggleDropdown() {
		dropdownOpen = !dropdownOpen;
	}
</script>

<h1>{objekt.adresse}, {objekt.plz} {objekt.ort}</h1>

<hr>

<div class="relative mb-6">
	<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center" on:click={toggleDropdown}>
		Ausweis erstellen +
	</button>
	{#if dropdownOpen}
		<div class="absolut mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
			<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
				<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?aufnahme={aufnahme.uid}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis Wohnen Erstellen</a>
				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?aufnahme={aufnahme.uid}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis Gewerbe Erstellen</a>
				<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?aufnahme={aufnahme.uid}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis Erstellen</a>
			</div>
		</div>
	{/if}
</div>	

<div class="my-4 grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-2">

<div class="relative bg-gray-100 rounded-md flex justify-center items-center">
	{#if aufnahme.bilder.length > 0}
	<Carousel perPage={3}>
		{#each aufnahme.bilder as bild, i (i)}
			<img src="/bilder/{bild.uid}.jpg" alt={bild.kategorie} class="max-h-[25vh] 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>

<style>
	.button {
		padding: 0.5rem 1rem;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
	}
</style>

<div class="my-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
	{#each aufnahme.verbrauchsausweise_wohnen as ausweis}
		<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
	{/each}
	{#each aufnahme.bedarfsausweise_wohnen as ausweis}
		<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
	{/each}
	{#each aufnahme.verbrauchsausweise_gewerbe as ausweis}
		<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
	{/each}
	{#each aufnahme.geg_nachweise_wohnen as nachweis}
		<DashboardNachweis {nachweis} {aufnahme} {objekt}></DashboardNachweis>
	{/each}
</div>