<script lang="ts">
	import { BenutzerClient } from "#components/Ausweis/types";
	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
	export let user: BenutzerClient;
</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">
	<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
		<figure class="lg:w-1/2"><img src="https://www.houseanddecors.com/wp-content/uploads/2019/01/modern-house-04.jpg" class="object-cover w-full h-full" alt="Album"/></figure>
		<div class="card-body lg:w-1/2">
			<div class="flex flex-row flex-wrap gap-2">
				<div class="badge badge-accent font-semibold">Verbrauchsausweis</div>
			<div class="badge badge-success font-semibold">Ausgestellt</div>
			</div>
			<h2 class="card-title">Curslacker Deich 170, 21039</h2>
			<div class="mb-4 flex flex-row items-center gap-4">
				<progress class="progress w-full" value="54" max="100"></progress>
				<span class="text-sm font-semibold text-base-content">54%</span>
			</div>
			<div class="flex flex-col gap-2">
				<div class="flex flex-row justify-between">
					<span>Energieverbrauch</span>
					<span class="font-bold text-base-content">215kWh/A</span>
				</div>
				<div class="flex flex-row justify-between">
					<span>CO2 Ausstoß</span>
					<span class="font-bold text-base-content">N/A</span>
				</div>
				<div class="flex flex-row justify-between">
					<span>Erstellungsdatum</span>
					<span class="font-bold text-base-content">22.01.2023</span>
				</div>
				<div class="flex flex-row justify-between">
					<span>Baujahr</span>
					<span class="font-bold text-base-content">1962 / 1985</span>
				</div>
				<div class="flex flex-row justify-between">
					<span>Wohnfläche</span>
					<span class="font-bold text-base-content">112m²</span>
				</div>
			</div>
			<div class="card-actions justify-end mt-auto">
				<a class="btn btn-primary">Als Vorlage benutzen</a>
				<a class="btn btn-primary">Bearbeiten</a>
				<button class="btn btn-primary" on:click={() => hilfeModal.showModal()}>Hilfe Erhalten</button>
				<dialog id="hilfeModal" class="modal">
					<div class="modal-box">
						<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
						<p>Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres Ausweises?</p>
						<p>In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf häufig gestellte Fragen.</p>
						<p>Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch unter <a href="tel:040-220-31-87">040 220 31 87</a> an oder <a href="mailto:moritz.utcke@gmx.de">schreiben sie uns eine email</a>.</p>
						<p>Wenn wir telefonisch nicht erreichbar sind, können sie uns auch direkt hier eine Nachricht hinterlassen.</p>
						<form class="my-4">
							<textarea class="textarea textarea-bordered" placeholder="Ihre Nachricht..." cols="10" rows="5"></textarea>
							<button class="btn btn-primary">Nachricht Abschicken</button>
						</form>
						<div class="modal-action">
							<form method="dialog">
								<button class="btn">Schließen</button>
							</form>
						</div>
					</div>
				</dialog>
				<button class="btn btn-ghost" title="PDF Herunterladen"><svg width="22" height="22" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button>
			</div>
		</div>
	</div>

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