<script>
    let { onclick, ondragstart, tag_colors = {}, task } = $props();

    function calcStyle(){
        if (!task.tags || !tag_colors) return '';
        for (let tag of task.tags){
            let color = tag_colors[tag.toLowerCase()];
            if (color) return `background-color: ${color}`;
        }
        return '';
    }
    let style = $derived.by(calcStyle)

</script>

<div
        draggable="true"
        class={`box prio_${task.total_prio} p${Math.floor(task.total_prio/10)*10} p${task.total_prio % 10}`}
        {onclick} {ondragstart}
        style={style}
        title={task.description.source}
>
    <span class="title">{task.name}</span>
    {#if task.estimated_time}
    <span class="estimate">
    ({task.estimated_time}&nbsp;h)
    </span>
    {/if}
    {#if task.tags}
    <span class="tags">
        {task.tags.join(' ')}
    </span>
    {/if}
    {#if task.due_date}
    <span class="due_date" style={style}>
        {#if task.start_date}
        {task.start_date}
        {/if}
    → {task.due_date}
    </span>
    {/if}

</div>