<script lang="ts">
	import { BenutzerClient } from "#components/Ausweis/types";
	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
	import { client } from "src/trpc";
	export let user: BenutzerClient;

	let ausweisRequest = client.v1.benutzer.getAusweise.query({
		limit: 10
	});
</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">

	{#await ausweisRequest}
		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
		
	{:then ausweise}
		{#if ausweise.length == 0}
			<div class="">
				<h1 class="text-2xl">Es konnten keine Ausweise gefunden werden.</h1>
				<p>Erstellen sie einen Verbrauchsausweis für ihr Wohngebäude <a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">hier</a></p>
			</div>
		{:else}
			{#each ausweise as ausweis}
				<DashboardAusweis {ausweis}></DashboardAusweis>
			{/each}
		{/if}
	{/await}

</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>