<script lang="ts">
    import './layout.css';
    import { enhance } from '$app/forms';
    import { page } from '$app/state';
     $: user = page.data.user;
    $: isAdmin = user?.groups.some(g => g.permissions.includes("ADMIN"))
</script>

<div class="min-h-screen bg-brand-sand">
	<!-- Changed background to Sand -->

	<!-- Corporate Header -->
	{#if !page.url.pathname.startsWith('/login')}
		<header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="flex justify-between h-20">
					<!-- Slightly taller header -->

					<!-- Logo & Nav -->
					<div class="flex">
						<!-- LOGO (Extracted from their SVG) -->
						<div class="flex-shrink-0 flex items-center mr-8">
							<a href="/" class="flex items-center gap-2" aria-label="Familienarchiv">
								<!-- SVG Code from their site -->
								<svg
									width="250"
									height="25"
									viewBox="0 0 250 25"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
								>
									<path
										d="M0.156128 1.01562C5.375 1.43431 9.621 4.65591 9.621 11.6669V19.8779H0.156128V10.4467H5.76852C5.76852 5.6736 3.70661 3.72129 0.156128 2.8334V1.01562Z"
										fill="#B4B9FF"
									></path>
									<path
										d="M10.5892 19.8779C15.8076 19.4592 20.0541 16.2371 20.0541 9.22655V1.01562H10.5892V10.4467H16.2012C16.2012 15.2199 14.1397 17.1722 10.5892 18.0601V19.8779Z"
										fill="#B4B9FF"
									></path>

									<text
										x="35"
										y="20"
										fill="#002850"
										font-family="Montserrat"
										font-weight="bold"
										font-size="20">FAMILIENARCHIV</text
									>
								</svg>
							</a>
						</div>

						<!-- Nav Links (Montserrat font, Uppercase style often used in corporate) -->
						<div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
							<a
								href="/"
								class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
                           {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
									? 'border-brand-navy text-brand-navy'
									: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
							>
								Dokumente
							</a>

							<a
								href="/persons"
								class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
                           {page.url.pathname.startsWith('/persons')
									? 'border-brand-navy text-brand-navy'
									: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
							>
								Personen
							</a>

							<a
								href="/conversations"
								class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
                           {page.url.pathname.startsWith('/conversations')
									? 'border-brand-navy text-brand-navy'
									: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
							>
								Konversationen
							</a>
							{#if isAdmin}
								<a
									href="/admin"
									class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
                           {page.url.pathname.startsWith('/admin')
										? 'border-brand-navy text-brand-navy'
										: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
								>
									Admin
								</a>
							{/if}
						</div>
					</div>

					<!-- Right Side -->
					<div class="flex items-center">
						<form action="/logout" method="POST" use:enhance>
							<button
								type="submit"
								class="text-sm text-gray-500 hover:text-brand-navy font-bold uppercase font-sans tracking-wide px-3 py-2 transition"
							>
								Abmelden
							</button>
						</form>
					</div>
				</div>
			</div>
		</header>
	{/if}

	<main class="py-6">
		<slot />
	</main>
</div>
