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

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

// Auto-collapse list when user opens the create form (gives max form space on tablet)
const autoCollapse = $derived(page.url.pathname === '/admin/users/new');

// Mobile: show only the relevant panel at a time
const isAtListRoot = $derived(page.url.pathname === '/admin/users');
</script>

<!-- List panel: full-screen on mobile at list root; always visible at md+ -->
<div class="{isAtListRoot ? 'flex' : 'hidden'} flex-shrink-0 md:flex">
	<UsersListPanel users={data.users} autocollapse={autoCollapse} />
</div>

<!-- Detail panel: full-screen on mobile when not at list root; always visible at md+ -->
<div class="{isAtListRoot ? 'hidden' : 'flex'} min-w-0 flex-1 flex-col overflow-hidden md:flex">
	{@render children()}
</div>
