{% extends "base.html" %}
{% block title %}Trellis{% endblock %}
{% block body %}
<script>
(function() {
  var hide = new URLSearchParams(location.search).get('hide');
  if (hide === 'done') localStorage.setItem('garden.trellisHideDone', 'done');
  else localStorage.removeItem('garden.trellisHideDone');
})();
</script>
<div class="page-head"><div><h1>Trellis</h1><p>The structure the work climbs: dependencies left to right, dashed edges for discovered work. A task with one open dependency stacks on its PR instead of waiting.</p></div>
  <div class="tools">
    {% if hide_done %}<a href="{{ show_url }}" class="btn" data-hide-toggle>show {{ hidden_count }} done</a>
    {% else %}<a href="{{ hide_url }}" class="btn" data-hide-toggle>hide done{% if hidden_count %} ({{ hidden_count }}){% endif %}</a>{% endif %}
  </div>
</div>
<div class="filters">
  <a href="/trellis{{ '?closed=1' if closed else '' }}" class="{{ 'on' if not product else '' }}">all</a>
  {% for p in products %}{% for ph in p.phases if closed or not ph.closed %}
    <a href="/trellis?product={{ p.name }}&phase={{ ph.name }}{{ '&closed=1' if closed else '' }}" class="{{ 'on' if product == p.name and phase == ph.name else '' }}">{{ p.name }}/{{ ph.name }}</a>
  {% endfor %}{% endfor %}
  {% if closed_count %}<a href="/trellis?{% if product %}product={{ product }}&phase={{ phase }}&{% endif %}{{ '' if closed else 'closed=1' }}" class="{{ 'on' if closed else '' }}" title="Closed phases stay off the trellis by default">include closed</a>{% endif %}
</div>
{% if problems %}<div class="warn">{% for p in problems %}{{ p }}<br>{% endfor %}</div>{% endif %}
<div class="panel" style="margin-bottom:14px">
  <span class="muted">ready now:</span> {% for r in ready %}<a href="/tasks/{{ r }}" class="id">{{ r }}</a> {% else %}<span class="faint">none</span>{% endfor %}
  {% if critical %}&nbsp;·&nbsp;<span class="muted">longest open chain:</span> <span class="mono">{{ critical|join(' → ') }}</span>{% endif %}
</div>
<div class="specimen" style="overflow-x:auto; padding:10px">
  {{ svg|safe }}
  <div style="display:flex; gap:18px; flex-wrap:wrap; margin:12px 4px 4px; font:11px/1.4 var(--mono); color:var(--muted); letter-spacing:.04em">
    {% for s_ in ['draft','ready','running','waiting_human','awaiting_triage','in_review','changes_requested','done','failed'] %}<span style="display:inline-flex;align-items:center;gap:6px">{{ stage(s_, 18) }}{{ s_.replace('_',' ') }} <span class="faint">· {{ stage_word(s_) }}</span></span>{% endfor %}
  </div>
  <details style="margin-top:10px"><summary>mermaid source (paste into docs or PRs)</summary><pre class="mono" style="margin-top:8px">{{ mermaid }}</pre></details>
</div>
{% endblock %}