<script lang="ts">
	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
	import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
	export let user: BenutzerClient;
	export let ausweise: VerbrauchsausweisWohnenClient[];

	const ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));
	
</script>

<h1 class="text-4xl font-medium my-8">Wichtiges</h1>

<div class="flex flex-row gap-4">
	<div class="card w-96 card-bordered bg-base-200 border-base-300">
		<div class="card-body">
			<div class="badge badge-warning font-semibold">Warnung!</div>
			<h2 class="card-title">Gebäudebilder</h2>
			<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
			<div class="card-actions justify-end">
				<a class="btn btn-primary">Beheben</a>
			</div>
		</div>
	</div>
	<div class="card w-96 card-bordered bg-base-200 border-base-300">
		<div class="card-body">
			<div class="badge badge-error font-semibold">Fehler!</div>
			<h2 class="card-title">Daten</h2>
			<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
			<div class="card-actions justify-end">
				<a class="btn btn-primary">Beheben</a>
			</div>
		</div>
	</div>
</div>

<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
	
<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
	
	{#if ausweise.length == 0}
		
	{:else}
		{#each ausweise as ausweis, i}
		{console.log(ausweis, i)}
			<DashboardAusweis progress={ausweisUeberpruefung[i].progress} {ausweis}></DashboardAusweis>
		{/each}
	{/if}

	<DashboardAusweisSkeleton></DashboardAusweisSkeleton>

</div>

<div class="flex items-center justify-center mt-12">
	<div class="join">
		<button class="join-item btn btn-ghost shadow-none">1</button>
		<button class="join-item btn btn-ghost shadow-none">2</button>
		<button class="join-item btn btn-ghost shadow-none">3</button>
		<button class="join-item btn btn-ghost shadow-none">4</button>
	</div>
</div>