{% extends "base.html" %}

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

{% if not active_projects and not archived_projects %}
{% set es_badge = "Catégorie" %}
{% set es_title = "Aucun projet" %}
{% set es_subtitle = "Cette catégorie ne contient pas encore de projet. Ajoutez-en un depuis la page d'administration." %}
{% set es_cards = [
  {"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": "Projet = Kanban", "text": "Un projet contient 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": "Tâches", "text": "Les tâches sont créées directement dans le kanban de chaque projet."}
] %}
{% set es_cta = {"label": "Configurer le board", "href": "/admin/board"} %}
{% include "partials/empty_state.html" %}
{% endif %}

{% for p in active_projects %}
<div class="section" id="{{ p.id }}" style="padding-top:0">
  <div class="section-title">
    <span>{{ p.acronym or p.name[:4] | upper }} / {{ p.name }}</span>
    <button type="button" class="btn-edit section-onboard-btn" title="Copy onboarding URL (cat_id + project_id) to clipboard so an LLM agent can self-onboard via the 401 runbook" onclick="copyOnboardLink(this, '{{ cat.id }}', '{{ p.id }}')">Copy onboard link</button>
  </div>
  {% set color = cat.color %}
  {% set snapshots = p.get('snapshots', []) %}
  {% if snapshots and snapshots | length >= 2 %}
  <div style="max-width:400px;margin-bottom:8px">
    {% include "partials/burndown.html" %}
  </div>
  {% endif %}
  {% set tasks = p.tasks %}
  {% set project_id = p.id %}
  {% set project_default_who = p.get('default_who', '') %}
  {% include "partials/kanban.html" %}
</div>
{% endfor %}


{% if archived_projects %}
<div class="section" style="padding-top:0">
  <button type="button" class="archived-toggle" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none';this.querySelector('span').textContent=this.nextElementSibling.style.display==='none'?'+':'-'">
    <span>+</span> Afficher les projets archiv&eacute;s ({{ archived_projects | length }})
  </button>
  <div class="archived-list" style="display:none">
    {% for p in archived_projects %}
    <div class="section archived-project" id="{{ p.id }}" style="padding-top:0;opacity:0.5">
      <div class="section-title">
        <span>{{ p.acronym or p.name[:4] | upper }} / {{ p.name }}</span>
      </div>
      {% set tasks = p.tasks %}
      {% set project_id = p.id %}
      {% set project_default_who = p.get('default_who', '') %}
      {% include "partials/kanban.html" %}
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}
{% endblock %}

{% block modals %}
<script>const CAT_PROJECTS = {{ cat_projects | tojson }};</script>
{% endblock %}

{% block scripts %}
<script>
// Append " / <project name>" to the page title when a project anchor or a
// task deep link (#ID-<id>, #109) is targeted.
(function () {
  const BASE_TITLE = {{ title | tojson }};
  const PROJECTS = (typeof CAT_PROJECTS !== 'undefined' && CAT_PROJECTS[{{ cat.id | tojson }}]) || [];
  function projectFromHash() {
    const hash = window.location.hash.slice(1);
    if (!hash) return null;
    const taskMatch = /^ID-(\d+)$/.exec(hash);
    if (taskMatch) {
      // Task deep link: derive the project from the card's surrounding
      // ``.section[id="<project-uuid>"]`` so the title still reflects the
      // user's location.
      const card = document.querySelector(`.kanban-task[data-task-id="${taskMatch[1]}"]`);
      const projectId = card?.closest('.section')?.id;
      return projectId ? PROJECTS.find(p => p.id === projectId) : null;
    }
    return PROJECTS.find(p => p.id === hash);
  }
  function updateTitle() {
    const project = projectFromHash();
    document.title = project ? BASE_TITLE + ' / ' + project.name : BASE_TITLE;
  }
  window.addEventListener('hashchange', updateTitle);
  updateTitle();
})();
</script>
{% endblock %}