<script lang="ts">
	import { auth } from '$lib/auth.svelte';
</script>

<div class="bg-base-100 fixed inset-0 z-[9999] flex items-center justify-center p-4">
	<div class="card bg-base-200 w-96 shadow-xl">
		<div class="card-body items-center gap-4 text-center">
			<h1 class="text-2xl font-bold">Not authorized</h1>
			<p class="text-sm opacity-70">
				Hold Slayer is a single-operator gateway. You're signed in as
				<span class="font-medium">{auth.user?.display_name ?? auth.user?.name}</span>,
				but this gateway is reserved for its owner.
			</p>
			<a href="/auth/logout" class="btn btn-outline w-full">Sign out</a>
		</div>
	</div>
</div>
