{% extends "base.html" %}

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

<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)" %}
      <div 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>
      </div>
      {% endfor %}
    </div>
    {% set color = c.color %}
    {% set actual = agg_actual %}
    {% include "partials/burndown.html" %}
  </a>
  {% endfor %}

  <div 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>
  </div>
</div></div>
{% endblock %}

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