{% extends "base.html" %}
{% block title %}{{ case.case_id }} — Journey — psyc{% endblock %}
{% block content %}
<section class="panel">
  <a class="back" href="/cases/{{ case.case_id }}">← {{ case.case_id }}</a>
  <div class="panel-head">
    <h1>Case Journey</h1>
    <button class="replay-btn" onclick="replayJourney()">▶ replay</button>
  </div>
  <p class="summary-lead">{{ case.summary }}</p>

  <ol class="journey playing" id="journey">
    {% for b in beats %}
    <li class="beat {{ 'beat-done' if b.occurred else 'beat-skip' }}" style="--i: {{ loop.index0 }}">
      <span class="beat-node"></span>
      <div class="beat-card">
        <span class="beat-line">{{ b.index }} · {{ b.line }}</span>
        <h2>{{ b.title }}{% if not b.occurred %} <span class="beat-pending">pending</span>{% endif %}</h2>
        <p class="beat-caption">{{ b.caption }}</p>
        {% if b.facts %}
        <ul class="beat-facts">{% for f in b.facts %}<li>{{ f }}</li>{% endfor %}</ul>
        {% endif %}
      </div>
    </li>
    {% endfor %}
  </ol>
</section>
<script>
function replayJourney() {
  const j = document.getElementById('journey');
  j.classList.remove('playing');
  void j.offsetWidth;
  j.classList.add('playing');
}
</script>
{% endblock %}