<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="border rounded-lg border-base-300 bg-white break-inside-avoid-column mb-4">
	{#if objekt.aufnahmen.length > 0}
		{@const bild = objekt.aufnahmen[0].bilder.find(bild => bild.kategorie === Enums.BilderKategorie.Gebaeude)}

		{#if bild}
			<img src="/bilder/{bild.uid}.jpg" class="w-full max-h-72 object-cover rounded-t-lg" alt="Gebäude">
		{:else}
			<img src="/placeholder.png" class="w-full max-h-72 object-cover rounded-t-lg" alt="Gebäude">
		{/if}
	{/if}

	<div class="p-4">
		<div class="flex flex-row justify-between items-center">
			<h3 class="text-lg font-medium">{objekt.adresse}, {objekt.plz} {objekt.ort}</h3>
			<span class="text-sm opacity-70 font-medium">{moment(objekt.erstellungsdatum).format("DD.MM.YYYY")}</span>
		</div>

		<div class="flex flex-col gap-2 mt-4">
			{#each objekt.aufnahmen as aufnahme}
				<div class="border rounded-lg px-4 py-2">
					<div class="flex flex-row justify-between items-center">
						<span>Stand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
						<a href="/dashboard/aufnahme/{aufnahme.uid}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><OpenInNewWindow size={20}></OpenInNewWindow></a>
					</div>
					<div class="flex flex-row gap-2">
						{#if aufnahme.verbrauchsausweise_wohnen.length > 0}
							<a href="/dashboard/aufnahme/{aufnahme.uid}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><File size={20}></File></a>
						{/if}
						{#if aufnahme.verbrauchsausweise_gewerbe.length > 0}
							<a href="/dashboard/aufnahme/{aufnahme.uid}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><File size={20}></File></a>
						{/if}
					</div>
				</div>
			{/each}
		</div>
	</div>
</div>