<script lang="ts">
	import { BenutzerClient, GebaeudeClient } from "#components/Ausweis/types";

	export let user: BenutzerClient;
	export let gebaeudeArray: GebaeudeClient[];
</script>

<h1 class="text-4xl font-medium my-8">Willkommen zurück, {user.vorname}!</h1>
<p class="text-lg">
	Hier finden Sie eine Übersicht über all ihre Ausweise und Gebäude.
</p>

<h1 class="text-4xl font-medium my-8">Gebäude</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
	{#each gebaeudeArray as gebaeude}
	<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
		<figure class="lg:w-1/2">
			<img
				src={(gebaeude.gebaeude_bilder && `/bilder/${gebaeude.gebaeude_bilder[0]?.uid}.webp`) || "/images/placeholder.jpg"}
				class="object-cover w-full h-full"
				alt="Gebäudebild"
			/>
		</figure>
		<div class="card-body lg:w-1/2 p-4">
			<h4 class="text-lg font-semibold">{gebaeude.adresse}, {gebaeude.plz} {gebaeude.ort}</h4>
		</div>
	</div>
{/each}
</div>