{% extends "base.html" %}
{% block title %}Session {{ client_session_id }} - Invincible{% endblock %}
{% block content %}
<style>
  .failover-pair { display: inline-flex; align-items: center; gap: 0.5rem;
                   margin: 0.2rem 0.7rem 0.2rem 0; }
  .chip { border: 1px solid var(--border); background: var(--surface-2);
          border-radius: 999px; padding: 0.1rem 0.65rem; font-size: 0.78rem; }
  .chip.from { color: var(--err); border-color: rgba(243, 114, 125, 0.35);
               background: var(--err-dim); }
  .chip.to { color: var(--accent-ink);
             border-color: rgba(139, 147, 255, 0.35);
             background: var(--accent-dim); }
  .failover-arrow { color: var(--faint); }
</style>
<h2>Session <code>{{ client_session_id }}</code></h2>
<p class="muted">created <span title="{{ created_at | absdate }}">{{ created_at | timeago }}</span> · updated <span title="{{ updated_at | absdate }}">{{ updated_at | timeago }}</span></p>

{% if summary.interruption_note %}
<div class="banner">{{ summary.interruption_note }}</div>
{% endif %}

<div class="cards">
  <div class="card"><span class="num">{{ summary.attempts }}</span><span class="label">Attempts</span></div>
  <div class="card"><span class="num">{{ summary.failovers }}</span><span class="label">Failovers</span></div>
  <div class="card"><span class="num">{{ summary.turns }}</span><span class="label">Turns</span></div>
  <div class="card"><span class="num">{{ summary.providers_used | length }}</span><span class="label">Providers</span></div>
</div>

<h3>Tasks</h3>
<div class="table-scroll">
<table>
  <thead><tr><th>Task</th><th>Status</th><th>Head</th><th>Payload</th></tr></thead>
  <tbody>
  {% for key, st in tasks.items() %}
  <tr class="task-row">
    <td>{{ key }}</td>
    <td>{{ st.status }}</td>
    <td>v{{ st.version }}</td>
    <td><code class="payload">{{ st.payload | tojson }}</code></td>
  </tr>
  {% else %}
  <tr><td colspan="4" class="empty">No task state tracked for this session.</td></tr>
  {% endfor %}
  </tbody>
</table>
</div>

{% if checkpoints %}
<h3>Checkpoints</h3>
<ul class="plain">
  {% for cp in checkpoints %}
  <li class="checkpoint-row"><code>#{{ cp.state_version }}</code>
      {{ cp.note }} <span class="muted">({{ cp.ts | timeago }})</span></li>
  {% endfor %}
</ul>
{% endif %}

{% if failovers %}
<h3>Failover chain</h3>
<div class="failover-chain">
  {% for f in failovers %}
  {# one line: the "from → to" text shape is asserted in tests #}
  <span class="failover-pair"><span class="chip from">{{ f.from }}</span> <span class="failover-arrow">→</span> <span class="chip to">{{ f.to }}</span></span>
  {% endfor %}
</div>
{% endif %}

<h3>Activity</h3>
<div class="table-scroll">
<table>
  <thead><tr><th>When</th><th>What</th></tr></thead>
  <tbody>
  {% for n in activity %}
  <tr class="activity-row activity-{{ n.kind }}">
    <td class="muted">{% if n.ts %}<span title="{{ n.ts | absdate }}">{{ n.ts | timeago }}</span>{% else %}-{% endif %}</td>
    <td>{{ n.label }}</td>
  </tr>
  {% else %}
  <tr><td colspan="2" class="empty">No provider attempts or state changes recorded yet.</td></tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% endblock content %}