<script lang="ts">
import { page } from '$app/state';
import GroupsListPanel from './GroupsListPanel.svelte';

let { data, children } = $props();

const autoCollapse = $derived(page.url.pathname === '/admin/groups/new');
const isAtListRoot = $derived(page.url.pathname === '/admin/groups');
</script>

<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
	<GroupsListPanel groups={data.groups} autocollapse={autoCollapse} />
</div>

<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
	{@render children()}
</div>
