<script lang="ts">
	import { ObjektKomplettClient } from "#components/Ausweis/types.js";
	import { Enums } from "#lib/client/prisma.js";
	import moment from "moment";
	import { File, OpenInNewWindow } from "radix-svelte-icons";

	export let objekt: ObjektKomplettClient;
</script>

<div class=" bg-white grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4">
	{#if objekt.aufnahmen.length > 0}
		{@const bild = objekt.aufnahmen[0].bilder.find(bild => bild.kategorie === Enums.BilderKategorie.Gebaeude)}
		<div>
		{#if bild}
			<img src="/bilder/{bild.id}.jpg" class="w-full h-[150px] object-cover rounded-lg" alt="Gebäude">
		{:else}
			<img src="/placeholder.png" class="w-full h-[150px] object-cover rounded-lg" alt="Gebäude">
		{/if}
		<h3 class="text-lg font-medium">{objekt.adresse}, {objekt.plz} {objekt.ort}</h3>
		</div>
	{/if}

	<div class="flex gap-4">
		{#if objekt.aufnahmen.at(-1)?.verbrauchsausweise_wohnen.length}
			{@const ausweis = objekt.aufnahmen.at(-1)?.verbrauchsausweise_wohnen.at(-1)}
			<a href="/pdf/ansichtsausweis?id={ausweis.id}" target="_blank">
				<div class="inline-block border rounded-lg bg-white">
					{#if ausweis?.ausgestellt}
						<img src="/images/dashboard/ausweishaken.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">	
					{:else}
						<img src="/images/dashboard/ausweiskreuz.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">	
					{/if}
				</div>
				<div class="text-sm text-center">Energieausweis</div>
			</a>
		{/if}
		{#if objekt.aufnahmen.at(-1)?.verbrauchsausweise_gewerbe.length}
			{@const ausweis = objekt.aufnahmen.at(-1)?.verbrauchsausweise_gewerbe.at(-1)}
			<a href="/pdf/ansichtsausweis?id={ausweis.id}" target="_blank">
				<div class="inline-block border rounded-lg bg-white">
					{#if ausweis?.ausgestellt}
						<img src="/images/dashboard/ausweishaken.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">	
					{:else}
						<img src="/images/dashboard/ausweiskreuz.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">	
					{/if}
				</div>
				<div class="text-sm text-center">Energieausweis</div>
			</a>
		{/if}
		{#if objekt.aufnahmen.at(-1)?.bedarfsausweise_wohnen.length}
			{@const ausweis = objekt.aufnahmen.at(-1)?.bedarfsausweise_wohnen.at(-1)}
			<a href="/pdf/ansichtsausweis?id={ausweis.id}" target="_blank">
				<div class="inline-block border rounded-lg bg-white">
					{#if ausweis?.ausgestellt}
						<img src="/images/dashboard/ausweishaken.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">	
					{:else}
						<img src="/images/dashboard/ausweiskreuz.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">	
					{/if}
				</div>
				<div class="text-sm text-center">Energieausweis</div>
			</a>
		{/if}
	</div>
	<div class="flex flex-col gap-4">
		{#each objekt.aufnahmen as aufnahme}
			<div class="inline-block border rounded-lg px-4 py-2 w-full">
				<div class="flex justify-between items-center w-full">
					<span class="text-sm">Detailübersicht<br>Stand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
					<a href="/dashboard/aufnahme/{aufnahme.id}" class="rounded-lg p-2 hover:bg-gray-100"><OpenInNewWindow size={30}></OpenInNewWindow></a>
				</div>
			</div>
		{/each}
	</div>
</div>
<hr>