<script>
	let { select = o => {}, tree } = $props();

	let nodes = $derived(Object.values(tree).sort((a,b) => a.name.localeCompare(b.name)))

	function onclick(ev,node){
		ev.preventDefault();
		ev.stopPropagation();
		select(node);
		return true;
	}
</script>

<ul>
	{#each nodes as node (node.id)}
	<li onclick={ev => onclick(ev,node)}>
		{node.name}
		{#if node.Children}
		<svelte:self tree={node.Children} {select} />
		{/if}
	</li>
	{/each}
</ul>