{% import "macros.html" as m %}
{% if not view.ok %}
  {{ m.absence(view) }}
{% else %}
<section class="card fw-panel">
  <header class="fw-panel__head">
    <h2 class="card__title fw-panel__title">Roadmap to {{ view.final_stage.label or '—' }}</h2>
    <span class="fw-spacer"></span>
    <span class="fw-panel__note mono">start → done → now → left</span>
  </header>
  <div class="fw-chain">
    {% for s in view.stages %}
    <div class="fw-chain__node {% if loop.index0 == view.here %}fw-chain__node--here{% endif %}">
      {% if loop.index0 == view.here %}<span class="fw-chain__here">you are here {{ m.derived() }}</span>{% endif %}
      <div class="fw-chain__label">{{ s.label }}</div>
      {{ m.tstate(s.state) }}
      <div class="progress fw-chain__bar"><div class="progress__fill {% if s.state == 'done' %}progress__fill--done{% endif %}" style="width: {{ ((s.progress|default(0)) * 100)|round|int }}%"></div></div>
      <div class="fw-chain__pct mono">{{ ((s.progress|default(0)) * 100)|round|int }}%</div>
    </div>
    {% if not loop.last %}<div class="fw-chain__link" aria-hidden="true">→</div>{% endif %}
    {% endfor %}
  </div>
</section>

<section class="card fw-panel">
  <header class="fw-panel__head">
    <h2 class="card__title fw-panel__title">Stages — risk · cost · dependency</h2>
  </header>
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>State</th><th>Stage</th><th class="num">Progress</th>
          <th>Risk</th><th>Effort</th><th>ETA</th><th>Deps</th><th>Owner</th>
        </tr>
      </thead>
      <tbody>
        {% for s in view.stages %}
        <tr>
          <td>{{ m.tstate(s.state) }}</td>
          <td>
            <div class="fw-cell-title">{{ s.label }}</div>
            {% if s.summary %}<div class="evidence">{{ s.summary }}</div>{% endif %}
          </td>
          <td class="num">{{ ((s.progress|default(0)) * 100)|round|int }}%</td>
          <td>{% if s.risk %}<span class="level-badge level-badge--{{ s.risk }}">{{ s.risk }}</span>{% else %}<span class="muted">—</span>{% endif %}</td>
          <td>{% if s.effort %}<span class="level-badge level-badge--effort">{{ s.effort }}</span>{% else %}<span class="muted">—</span>{% endif %}</td>
          <td class="mono">{{ s.eta or '—' }}</td>
          <td class="mono muted">{{ s.depends_on|join(', ') if s.depends_on else '—' }}</td>
          <td class="mono muted">{{ s.owner or '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}