<script lang="ts">
import EntityNav from './EntityNav.svelte';

let { data, children } = $props();
</script>

<svelte:head>
	<title>Admin · Familienarchiv</title>
</svelte:head>

<!--
  -mt-6: cancel the global layout's pt-6 on <main>
  Height fills from below the global header (64px) to bottom of viewport.
-->
<div class="-mt-6 -mb-6 flex overflow-hidden" style="height: calc(100vh - 65px)">
	<!-- Entity Nav: hidden on mobile, icon strip on tablet, full labels on desktop -->
	<div class="hidden md:flex">
		<EntityNav
			userCount={data.userCount}
			groupCount={data.groupCount}
			tagCount={data.tagCount}
			inviteCount={data.inviteCount}
			canManageUsers={data.canManageUsers}
			canManageTags={data.canManageTags}
			canManagePermissions={data.canManagePermissions}
			canRunMaintenance={data.canRunMaintenance}
		/>
	</div>

	<!-- Right side: list panel + detail panel (or full-width for system) -->
	<div class="flex min-w-0 flex-1 overflow-hidden">
		{@render children()}
	</div>
</div>
