{% extends "base.html" %}

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

<div class="section" style="padding-top:0">
  <div class="section-title">
    <span>Gestion du board</span>
    <button type="button" class="btn-edit section-onboard-btn" onclick="editCat('','','')">+ Cat&eacute;gorie</button>
  </div>

  <div id="board-admin-list" class="board-admin-list">
    {% for cat in all_categories %}
    <div class="board-cat" data-cat-id="{{ cat.id }}">
      <div class="board-cat-header">
        <span class="board-drag-handle" title="Drag">&#x2630;</span>
        <span class="board-cat-color" style="background:{{ cat.color }}"></span>
        <span class="board-cat-name" style="flex:1">{{ cat.name }}
          <button class="btn-edit section-onboard-btn" onclick="editProject('','','','{{ cat.id }}','active')">+ Projet</button>
        </span>
        <button class="btn-edit" onclick="editCat('{{ cat.id }}','{{ cat.name | jsesc }}','{{ cat.color | jsesc }}')">Editer</button>
      </div>
      <div class="board-projects" data-cat-id="{{ cat.id }}">
        {% for p in all_projects if p.cat_id == cat.id %}
        <div class="board-project" data-project-id="{{ p.id }}" data-cat-id="{{ cat.id }}">
          <span class="board-drag-handle" title="Drag">&#x2630;</span>
          <span class="board-project-acronym">{{ p.acronym or p.name[:4] | upper }}</span>
          <span class="board-project-name">{{ p.name }}</span>
          <span class="board-project-status {{ 'archived' if p.get('status') == 'archived' else '' }}">{{ p.get('status', 'active') }}</span>
          <button class="btn-edit" 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>
        {% endfor %}
      </div>
    </div>
    {% endfor %}

    {% if not all_categories %}
    {% set es_badge = "Administration" %}
    {% set es_title = "Le board est vide" %}
    {% set es_subtitle = "Commencez par créer votre première catégorie." %}
    {% 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égorie", "text": "Créez une catégorie pour regrouper vos projets par thème."},
      {"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": "Ajoutez des projets dans chaque catégorie. Chacun est un kanban."},
      {"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": "Les tâches se créent dans le kanban de chaque projet."}
    ] %}
    {% set es_cta = {"label": "+ Catégorie", "href": "javascript:editCat('','','')"} %}
    {% include "partials/empty_state.html" %}
    {% endif %}
  </div>

</div>

{% endblock %}

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

{% block scripts %}
<script>
// -- Drag & drop categories --------------------------------------------------
const boardList = document.getElementById('board-admin-list');
if (boardList) {
  new Sortable(boardList, {
    animation: 150,
    handle: '.board-cat-header .board-drag-handle',
    draggable: '.board-cat',
    ghostClass: 'task-ghost',
    onEnd: (evt) => {
      apiCall('/api/v1/categories/reorder', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ from: evt.oldIndex, to: evt.newIndex }),
      }).catch(() => {});
    }
  });
}

// -- Drag & drop projects (within and between categories) ---------------------
document.querySelectorAll('.board-projects').forEach(container => {
  container._sortable = new Sortable(container, {
    group: 'board-projects',
    animation: 150,
    handle: '.board-drag-handle',
    draggable: '.board-project',
    ghostClass: 'task-ghost',
    onEnd: (evt) => {
      const projectId = evt.item.dataset.projectId;
      const newCatId = evt.to.dataset.catId;
      if (!projectId) return;
      // Collect the new project order in the target category
      const project_order = [...evt.to.querySelectorAll('.board-project')].map(el => el.dataset.projectId);
      // Update the project's category + reorder
      apiCall('/api/v1/projects/' + projectId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cat: newCatId, project_order }),
      }).catch(() => {});
    }
  });
});
</script>
{% endblock %}