<script lang="ts">
	import { currentUser } from '$lib/stores/user';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';

	onMount(() => {
		if (!$currentUser || $currentUser.allianceRole === 'member') {
			goto('/');
		}
	});
</script>

<svelte:head>
	<title>Moderation - openplace</title>
</svelte:head>

<div class="bg-base-200 min-h-screen p-4">
	<div class="grid h-full grid-cols-[350px_1fr] gap-4">
		<section class="flex flex-col gap-3 overflow-auto px-1 pb-1">
			<div class="mb-4 flex items-center justify-between">
				<div class="flex items-center gap-1">
					<a class="btn btn-ghost btn-circle" href="/">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
							<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"></path>
						</svg>
					</a>
					<span class="relative flex flex-col items-start">
						<h2 class="text-xl font-semibold">Reported users</h2>
						<span class="text-base-content/80 text-sm">Open tickets: 0</span>
					</span>
				</div>
			</div>

			<div class="mt-10 flex flex-col items-center justify-center gap-2">
				<p class="text-base-content/60">No open tickets</p>
			</div>
		</section>

		<section class="rounded-box bg-base-100 overflow-auto shadow p-4">
			<p class="text-base-content/60">Select a ticket to view details</p>
		</section>
	</div>
</div>
