{# -*- CUI // SP-CTI -*-
  Reusable partial — Projects in Flight section + Task Board auto-hide.

  Include underneath any page that renders the kanban board (`#kanban-board`
  with `.kanban-column[data-status=...]` children). The partial ships the
  full HTML / CSS / JS needed — the host page only has to:

      * include this file with `{% include "_projects_in_flight.html" %}`
      * call `refreshProjectsInFlight()` once on load + on each auto-refresh
      * call `checkBoardEmptyAndToggle()` after any kanban refresh that
        updates the `.kanban-column-count` numbers

  Auto-hide semantics:
      * Task Board hides when suggested/backlog/scheduled/in_progress
        columns all read 0. "Done" alone doesn't count.
      * Each project card hides when its prefix reaches 100% done (or 0%
        exists). Implemented server-side in /api/projects/progress.
      * Section hides entirely when zero projects are visible.

  Config: args/projects.yaml. Add a project → it appears here on next
  load. No code change required. #}

<div id="kanban-board-empty" class="kanban-empty-placeholder" style="display:none;">
    <em>No active tasks on the board. Any in-flight projects appear below.</em>
</div>

<section id="projects-in-flight" style="margin-top:1.5rem;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem;">
        <h2 style="margin:0; font-size:1.15rem; color:var(--text-primary);">Projects in Flight</h2>
        <span id="projects-triage-summary" style="font-size:0.78rem; color:var(--text-secondary);"></span>
    </div>
    <div id="projects-container">
        <div class="kanban-empty" style="padding:1rem;">Loading projects…</div>
    </div>
</section>

<style>
  /* Dark-theme-aware, mirrors dashboard CSS variables from
     tools/dashboard/static/css/style.css */
  .proj-card { border: 1px solid var(--border-color, #2a2a40);
               border-radius: 8px; background: var(--bg-card, #16213e);
               margin-bottom: 0.75rem; overflow: hidden; }
  .proj-card > summary { padding: 0.75rem 1rem; cursor: pointer; list-style: none;
                         display: flex; align-items: center; gap: 0.75rem;
                         background: var(--bg-secondary, #1a1a2e);
                         border-bottom: 1px solid var(--border-color, #2a2a40); }
  .proj-card > summary::-webkit-details-marker { display: none; }
  .proj-card > summary::before { content: "▶"; font-size: 0.75rem;
                                  color: var(--text-secondary); transition: transform 0.15s; }
  .proj-card[open] > summary::before { transform: rotate(90deg); }
  .proj-title { font-weight: 600; color: var(--text-primary, #e0e0e0);
                flex: 1; font-size: 1rem; }
  .proj-summary-stats { font-family: monospace; font-size: 0.85rem;
                        color: var(--text-secondary, #a0a0b8); }
  .proj-body { padding: 0.75rem 1rem; }
  .proj-desc { color: var(--text-secondary, #a0a0b8); margin: 0 0 0.5rem;
               font-size: 0.88rem; }
  .proj-briefs { margin: 0 0 1rem; font-size: 0.85rem; }
  .proj-briefs a { color: var(--accent-blue-light, #6db3f8); margin-right: 1rem;
                   text-decoration: none; }
  .proj-briefs a:hover { text-decoration: underline; }

  .proj-epic { display: grid; grid-template-columns: 32% 1fr 26%; gap: 0.75rem;
               padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #2a2a40);
               border-radius: 6px; margin-bottom: 0.4rem;
               background: var(--bg-primary, #0f0f1a); align-items: center; }
  .proj-epic-key { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
  .proj-epic-key .pri { display: inline-block; font-size: 0.68rem; padding: 0.1rem 0.4rem;
                        border-radius: 3px; margin-left: 0.4rem; font-weight: 600; }
  .pri-critical { background: rgba(220,53,69,0.2); color: #ff6b7a;
                  border: 1px solid rgba(220,53,69,0.5); }
  .pri-high     { background: rgba(255,152,0,0.2); color: #ffb74d;
                  border: 1px solid rgba(255,152,0,0.5); }
  .pri-medium   { background: rgba(33,150,243,0.2); color: #6db3f8;
                  border: 1px solid rgba(33,150,243,0.5); }
  .pri-low      { background: rgba(120,144,156,0.2); color: #b0bec5;
                  border: 1px solid rgba(120,144,156,0.4); }

  .proj-bar { background: var(--bg-input, #0d1b2a); border-radius: 4px; height: 14px;
              overflow: hidden; position: relative;
              border: 1px solid var(--border-color, #2a2a40); }
  .proj-bar-fill { background: linear-gradient(90deg, #4caf50, #66bb6a);
                   height: 100%; transition: width 0.3s; }
  .proj-bar-text { position: absolute; top: 0; left: 0; right: 0; text-align: center;
                   line-height: 14px; font-size: 0.72rem; color: var(--text-primary);
                   font-weight: 600; text-shadow: 0 0 3px rgba(0,0,0,0.7); }
  .proj-counts { font-family: monospace; font-size: 0.75rem;
                 color: var(--text-secondary); text-align: right; }
  .proj-badge { display: inline-block; padding: 0.08rem 0.3rem; border-radius: 3px;
                margin-left: 0.2rem; font-weight: 600; font-size: 0.72rem; }
  .badge-progress  { background: rgba(255,152,0,0.25); color: #ffb74d; }
  .badge-backlog   { background: rgba(120,144,156,0.25); color: #b0bec5; }
  .badge-failed    { background: rgba(244,67,54,0.25); color: #ff6b7a; }

  .kanban-empty-placeholder { padding: 2rem; text-align: center;
                              color: var(--text-muted, #6c6c80);
                              border: 1px dashed var(--border-color, #2a2a40);
                              border-radius: 8px;
                              background: var(--bg-card, #16213e); }
</style>

<script>
// All identifiers under window.ICDEV_PIF to avoid colliding with host-page
// globals. Thin wrappers preserve the short names for host-page init code.
// Double-include guard — if this partial is rendered twice on the same
// page (e.g. by a layout that includes it both in a header and footer),
// skip the IIFE on the second pass so we don't redefine the globals or
// re-register listeners.
(function () {
  if (window.ICDEV_PIF && window.ICDEV_PIF._loaded) return;
  if (!window.ICDEV_PIF) window.ICDEV_PIF = {};
  window.ICDEV_PIF._loaded = true;

  function escapeHTML(s) {
    return String(s || '').replace(/[&<>"']/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
    });
  }

  function projectCardHTML(p) {
    var openAttr = p.default_open ? ' open' : '';
    var anchor = 'project-' + (p.key || '');
    var brief = (p.briefs || []).map(function (b) {
      return '<a href="' + escapeHTML(b.path) + '">' + escapeHTML(b.label) + '</a>';
    }).join('');
    var desc = p.description ? '<p class="proj-desc">' + escapeHTML(p.description) + '</p>' : '';

    var epics = (p.epics || []).map(function (e) {
      var pct = Math.max(0, Math.min(100, e.pct || 0));
      var pri = escapeHTML(e.priority || 'medium');
      var badges = [];
      if (e.in_progress) badges.push('<span class="proj-badge badge-progress">' + e.in_progress + ' in flight</span>');
      if (e.scheduled)   badges.push('<span class="proj-badge badge-progress">' + e.scheduled + ' scheduled</span>');
      if (e.backlog)     badges.push('<span class="proj-badge badge-backlog">' + e.backlog + ' queued</span>');
      if (e.failed)      badges.push('<span class="proj-badge badge-failed">' + e.failed + ' failed</span>');
      return ''
        + '<div class="proj-epic">'
        + '  <div class="proj-epic-key">' + escapeHTML(e.title || e.key)
        + '    <span class="pri pri-' + pri + '">' + pri + '</span>'
        + '  </div>'
        + '  <div class="proj-bar">'
        + '    <div class="proj-bar-fill" style="width:' + pct + '%"></div>'
        + '    <div class="proj-bar-text">' + (e.done || 0) + ' / ' + (e.total || 0) + ' done · ' + pct + '%</div>'
        + '  </div>'
        + '  <div class="proj-counts">' + badges.join('') + '</div>'
        + '</div>';
    }).join('');

    var overallPct = Math.max(0, Math.min(100, p.overall_pct || 0));
    return ''
      + '<details class="proj-card" id="' + escapeHTML(anchor) + '"' + openAttr + '>'
      + '  <summary>'
      + '    <div class="proj-title">' + escapeHTML(p.name || p.key) + '</div>'
      + '    <div class="proj-summary-stats">' + (p.done_tasks || 0) + ' / ' + (p.total_tasks || 0) + ' · ' + overallPct + '%</div>'
      + '  </summary>'
      + '  <div class="proj-body">'
      +      desc
      + '    <div class="proj-briefs">' + brief + '</div>'
      +      epics
      + '  </div>'
      + '</details>';
  }

  function renderProjectsInFlight(payload) {
    var container = document.getElementById('projects-container');
    var section = document.getElementById('projects-in-flight');
    var summaryEl = document.getElementById('projects-triage-summary');
    if (!container) return;

    var projects = (payload && payload.projects) || [];
    var triage = (payload && payload.triage && payload.triage.summary) || {};

    if (summaryEl) {
      if ((triage.total || 0) > 0) {
        summaryEl.textContent = 'failure_triage: '
          + (triage.applied || 0) + ' applied / '
          + (triage.verification_failed || 0) + ' verify-failed / '
          + (triage.total || 0) + ' audited';
      } else {
        summaryEl.textContent = '';
      }
    }

    if (projects.length === 0) {
      if (section) section.style.display = 'none';
      return;
    }
    if (section) section.style.display = '';

    container.innerHTML = projects.map(projectCardHTML).join('');
  }

  function refreshProjectsInFlight() {
    fetch('/api/projects/progress')
      .then(function (r) { return r.json(); })
      .then(renderProjectsInFlight)
      .catch(function (err) {
        var container = document.getElementById('projects-container');
        if (container) {
          container.innerHTML = '<div class="kanban-empty" style="padding:0.5rem;">'
            + 'Failed to load projects: ' + (err && err.message || err) + '</div>';
        }
      });
  }

  // Task Board auto-hide. Called by host page after refreshKanbanTasks.
  function checkBoardEmptyAndToggle() {
    var active = ['suggested', 'backlog', 'scheduled', 'in_progress'];
    var total = 0;
    active.forEach(function (s) {
      var el = document.querySelector('.kanban-column[data-status="' + s + '"] .kanban-column-count');
      if (el) total += parseInt(el.textContent || '0', 10) || 0;
    });
    var board = document.getElementById('kanban-board');
    var placeholder = document.getElementById('kanban-board-empty');
    if (!board) return;
    if (total === 0) {
      board.style.display = 'none';
      if (placeholder) placeholder.style.display = 'block';
    } else {
      board.style.display = '';
      if (placeholder) placeholder.style.display = 'none';
    }
  }

  // Expose at module + top-level scope so host pages with their own
  // refresh loops can wire in with the short names they expect.
  window.ICDEV_PIF.refresh = refreshProjectsInFlight;
  window.ICDEV_PIF.render = renderProjectsInFlight;
  window.ICDEV_PIF.checkBoardEmpty = checkBoardEmptyAndToggle;

  window.refreshProjectsInFlight = refreshProjectsInFlight;
  window.renderProjectsInFlight = renderProjectsInFlight;
  window.checkBoardEmptyAndToggle = checkBoardEmptyAndToggle;
})();
</script>