{# HTML fragment for the dashboard's per-project aggregate (HTMX-loaded). #}
{% if goals %}
<div class="space-y-2 mb-3">
    {% for goal in goals %}
    <div>
        <div class="flex justify-between text-xs mb-1">
            <span class="text-slate-300">{{ goal.title }}</span>
            <span class="text-slate-500">{{ goal.task_completed }}/{{ goal.task_total }}</span>
        </div>
        <div class="w-full bg-slate-800 rounded-full h-1.5 overflow-hidden">
            <div class="h-full rounded-full
                {% if goal.percentage >= 100 %}bg-emerald-500{% elif goal.percentage >= 50 %}bg-brand-600{% else %}bg-amber-500{% endif %}"
                style="width: {{ goal.percentage }}%"></div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-xs text-slate-600 italic mb-3">No goals defined yet.</div>
{% endif %}

<div class="flex flex-wrap gap-1.5 text-[11px]">
    {% set total = (task_status_counts.values() | sum) if task_status_counts else 0 %}
    {% for status, count in (task_status_counts or {}).items() %}
    <span class="px-2 py-0.5 rounded-full
        {% if status == 'completed' %}bg-emerald-500/15 text-emerald-300
        {% elif status == 'ongoing' %}bg-brand-500/15 text-brand-300
        {% elif status == 'blocked' %}bg-red-500/15 text-red-300
        {% elif status == 'not_started' %}bg-slate-700/50 text-slate-300
        {% else %}bg-slate-700/40 text-slate-400{% endif %}">
        {{ count }} {{ status }}
    </span>
    {% endfor %}
    {% if not task_status_counts %}<span class="text-slate-600">no tasks yet</span>{% endif %}
</div>

{% if stalled_tasks %}
<div class="mt-3 text-xs text-red-300 flex items-center gap-1.5">
    <span>⚠</span> {{ stalled_tasks|length }} stalled task(s)
</div>
{% endif %}