<script>
	import { page } from '$app/stores';

	export let data;
</script>

<div class="min-h-screen bg-gray-50">
	{#if data.isAuthenticated && $page.url.pathname !== '/admin/login'}
		<nav class="border-b bg-white shadow-sm">
			<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
				<div class="flex h-16 justify-between">
					<div class="flex items-center">
						<h1 class="text-xl font-semibold text-gray-900">TaptApp Admin</h1>
					</div>
					<div class="flex items-center space-x-4">
						<a 
							href="/admin" 
							class="px-3 py-2 rounded-md text-sm font-medium {$page.url.pathname === '/admin' ? 'bg-gray-200 text-gray-900' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'}"
						>
							Invite Links
						</a>
						<a 
							href="/admin/audio" 
							class="px-3 py-2 rounded-md text-sm font-medium {$page.url.pathname === '/admin/audio' ? 'bg-gray-200 text-gray-900' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'}"
						>
							Audio Files
						</a>
						<a 
							href="/admin/ratings" 
							class="px-3 py-2 rounded-md text-sm font-medium {$page.url.pathname === '/admin/ratings' ? 'bg-gray-200 text-gray-900' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'}"
						>
							Ratings
						</a>
						<form method="POST" action="/admin/logout" class="inline">
							<button type="submit" class="text-red-600 hover:text-red-900">Logout</button>
						</form>
					</div>
				</div>
			</div>
		</nav>
	{/if}

	<main class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
		<slot />
	</main>
</div>
