{% extends "base.html" %}

{% block body %}
{% include "partials/header.html" %}

{% if doing_tasks %}
<div class="section">
  <div class="doing-overview">
    <div class="doing-overview-header">
      <span class="doing-overview-title">En cours</span>
      <span class="doing-overview-count">{{ doing_tasks | length }}</span>
    </div>
    <div class="doing-overview-tasks">
      {% for dt in doing_tasks %}
      {% set t = dt.task %}
      {# Deep-link to the task itself rather than its project section: the
         category page reads ``#ID-<id>`` and opens the matching card in
         detail mode (#109). #}
      {% set task_href = "cat/" ~ dt.cat_id ~ ".html#ID-" ~ t.id %}
      {% include "partials/task_card.html" %}
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

{% if not categories %}
{% set es_badge = "Plateforme Kanban" %}
{% set es_title = "Bienvenue sur KENBOARD" %}
{% set es_subtitle = "Organisez vos projets et vos tâches avec clarté. Conçu pour les équipes et les agents IA." %}
{% set es_cards = [
  {"icon": '<path d="M12 2v6m0 0l3-3m-3 3L9 5"/><rect x="3" y="10" width="7" height="5" rx="1"/><rect x="14" y="10" width="7" height="5" rx="1"/><rect x="8.5" y="17" width="7" height="5" rx="1"/>', "color": "blue", "title": "1. Catégories", "text": "Regroupez vos projets par thème. Chaque catégorie est une vue d'ensemble.", "tag": "Hiérarchie"},
  {"icon": '<rect x="2" y="3" width="4" height="18" rx="1"/><rect x="8" y="3" width="4" height="12" rx="1"/><rect x="14" y="3" width="4" height="15" rx="1"/><rect x="20" y="3" width="2" height="8" rx="1"/>', "color": "purple", "title": "2. Projets", "text": "Chaque projet est un kanban avec 4 colonnes : À faire, En cours, Revue, Fait."},
  {"icon": '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v18"/>', "color": "amber", "title": "3. Tâches", "text": "Créez des tâches dans chaque projet, assignez-les, suivez leur progression.", "tag": "Drag & drop"}
] %}
{% set es_cta = {"label": "Configurer le board", "href": "/admin/board"} %}
{% include "partials/empty_state.html" %}
{% else %}
<div class="section"><div class="cat-grid">
  {% for c in categories %}
  {% set cp = projects_by_cat[c.id] %}
  {% set total_tasks = cp | sum(attribute="total") %}
  {% set total_done = cp | sum(attribute="done") %}
  {% set agg_actual = aggregate_burndown(cp) %}

  <a class="cat-card" href="cat/{{ c.id }}.html">
    <div class="cat-header">
      <div class="cat-dot" style="background:{{ c.color }}"></div>
      <span class="cat-name">{{ c.name }}</span>
      <div class="cat-kpis"><div class="cat-kpi">
        <div class="value" style="color:var(--text)">{{ total_tasks - total_done }}</div>
        <div class="label">Ouvertes</div>
      </div></div>
    </div>
    <div class="cat-projects">
      {% for p in cp %}
      {% set doing = p.tasks | selectattr("status", "equalto", "doing") | list | length %}
      {% set dot_color = "#d0d7de" if doing == 0 else "color-mix(in srgb, " + c.color + " " + [30 + doing * 20, 100] | min | string + "%, white)" %}
      <button type="button" class="cat-project" onclick="event.preventDefault();window.location='cat/{{ c.id }}.html#{{ p.id }}'">
        <span class="cat-project-dot" style="background:{{ dot_color }}"></span>
        <span class="cat-project-short">{{ p.acronym or p.name[:4] | upper }}</span>
      </button>
      {% endfor %}
    </div>
    {% set color = c.color %}
    {% set actual = agg_actual %}
    {% include "partials/burndown.html" %}
  </a>
  {% endfor %}

</div></div>
{% endif %}
{% endblock %}