<script>
	import { onMount } from 'svelte';
	import { t } from '../../translations.svelte';
	import { api, get } from '../../urls.svelte';
	import { error, yikes } from '../../warn.svelte';
	import TaskTree from './Tree.svelte';

	let { project, select = o => {}, task } = $props();
	let tree = $state({});

	async function loadParentCandidates(){
		let url = api(`task/${task.id}/parent_candidates`);
		let res = await get(url);
		if (res.ok){
			yikes();
			tree = await res.json();
		} else error(res);
	}

	onMount(loadParentCandidates);
</script>

<div class="overlay parent_selector">
	<h2>{t('select a new parent for {entity}',{entity:task.name})}</h2>
	{t('project')}: {project.name}
	<TaskTree {tree} {select} />
</div>