1<script lang="ts">
 2	import { page } from '$app/stores';
 3	import { goto } from '$app/navigation';
 4	import { ServerErrorSplash } from '$lib/components/app';
 5
 6	let error = $derived($page.error);
 7	let status = $derived($page.status);
 8
 9	// Check if this is an API key related error
10	let isApiKeyError = $derived(
11		status === 401 ||
12			status === 403 ||
13			error?.message?.toLowerCase().includes('access denied') ||
14			error?.message?.toLowerCase().includes('unauthorized') ||
15			error?.message?.toLowerCase().includes('invalid api key')
16	);
17
18	function handleRetry() {
19		// Navigate back to home page after successful API key validation
20		goto('#/');
21	}
22</script>
23
24<svelte:head>
25	<title>Error {status} - WebUI</title>
26</svelte:head>
27
28{#if isApiKeyError}
29	<ServerErrorSplash
30		error={error?.message || 'Access denied - check server permissions'}
31		onRetry={handleRetry}
32		showRetry={false}
33		showTroubleshooting={false}
34	/>
35{:else}
36	<!-- Generic error page for non-API key errors -->
37	<div class="flex h-full items-center justify-center">
38		<div class="w-full max-w-md px-4 text-center">
39			<div class="mb-6">
40				<div
41					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10"
42				>
43					<svg
44						class="h-8 w-8 text-destructive"
45						fill="none"
46						stroke="currentColor"
47						viewBox="0 0 24 24"
48					>
49						<path
50							stroke-linecap="round"
51							stroke-linejoin="round"
52							stroke-width="2"
53							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
54						/>
55					</svg>
56				</div>
57				<h1 class="mb-2 text-2xl font-bold">Error {status}</h1>
58				<p class="text-muted-foreground">
59					{error?.message || 'Something went wrong'}
60				</p>
61			</div>
62			<button
63				onclick={() => goto('#/')}
64				class="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
65			>
66				Go Home
67			</button>
68		</div>
69	</div>
70{/if}