{% extends "base.html" %}

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

{% 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>
    <button class="btn-edit section-edit-btn" onclick="editProject('{{ p.id }}','{{ p.name | jsesc }}','{{ (p.acronym or '') | jsesc }}','{{ cat.id }}','{{ p.get('status', 'active') }}','{{ p.get('default_who', '') | jsesc }}')">Editer</button>
  </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 class="section" style="padding-top:0">
  <button type="button" class="cat-card-add" onclick="editProject('','','','{{ cat.id }}','active')" style="border:2px dashed var(--border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;color:var(--dimmed)">
    <span style="font-size:18px">+</span> Ajouter un projet
  </button>
</div>

{% 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>
        <button class="btn-edit section-edit-btn" onclick="editProject('{{ p.id }}','{{ p.name | jsesc }}','{{ (p.acronym or '') | jsesc }}','{{ cat.id }}','{{ p.get('status', 'active') }}','{{ p.get('default_who', '') | jsesc }}')">Editer</button>
      </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 %}
{% set cat_id = cat.id %}
{% include "modals/project.html" %}
<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 %}