<script>
    import {t} from '../translations.svelte.js';

    let {
        task,
        onSelect = (task) => {}
    } = $props();
</script>

<div>
    <div title={'task_'+task.id}>
        {#if task.est_time}
        <span class="estimate" onclick={() => onSelect(task)}>
            {task.est_time}&nbsp;{t(task.est_time != 1 ? 'hours' : 'hour')}
        </span>
        {/if}
        {task.name}
    </div>
    <div>
        {@html task.description.rendered}
    </div>
    {#if task.children}
    <ul>
        {#each task.children as child,tid}
        <svelte:self task={child} />
        {/each}
    </ul>
    {/if}

</div>