{% 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 %}

<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>
      <span class="cat-drag-handle" title="D&eacute;placer" aria-label="D&eacute;placer cette cat&eacute;gorie">&#9776;</span>
      <button class="btn-edit cat-edit-btn" onclick="event.preventDefault();editCat('{{ c.id }}','{{ c.name | jsesc }}','{{ c.color }}')">Editer</button>
      <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 %}

  <button type="button" class="cat-card cat-card-add" onclick="editCat('','','')">
    <span class="cat-add-plus"><span style="font-size:18px">+</span> Ajouter une cat&eacute;gorie</span>
  </button>
</div></div>
{% endblock %}

{% block modals %}
{% set cat_id = "" %}
{% include "modals/project.html" %}
{% include "modals/category.html" %}
<script>const CAT_PROJECTS = {{ cat_projects | tojson }};</script>
{% endblock %}