<script lang="ts">
	import {
		VerbrauchsausweisWohnenClient,
	} from "#components/Ausweis/types";
	import AusweisPruefenBox from "#components/AusweisPruefenBox.svelte";
	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
	import AusweisPruefenNotification from "#components/AusweisPruefenNotification.svelte";

	export let ausweise: VerbrauchsausweisWohnenClient[];
</script>

<div class="gap-4 flex flex-col">
	{#each ausweise as ausweis}
		{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis)}
			<div class="rounded-lg border w-full h-20 p-2.5 gap-4 flex flex-row items-center">
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-8 h-8 rounded-full"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="w-1/12 h-full flex flex-col gap-2">
					<div class="skeleton w-full h-4"></div>
					<div class="skeleton w-full h-4"></div>
				</div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
				<div class="skeleton w-4 h-4"></div>
			</div>
		{:then calculations}
			<AusweisPruefenBox {ausweis} {calculations}></AusweisPruefenBox>
		{/await}
	{/each}
</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>

<div class="fixed bottom-8 right-8 flex flex-col gap-4">
	<NotificationProvider component={AusweisPruefenNotification}></NotificationProvider>
</div>