app/templates/roadmap.html

{% extends "base.html" %}
{% block title %}Roadmap — ParaPilot{% endblock %}

{% block content %}
<!-- Hero -->
<section class="mb-8">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700 ring-1 ring-inset ring-brand-200 dark:bg-brand-500/10 dark:text-brand-300 dark:ring-brand-500/20">
        <span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span> Illinois · Dissolution of Marriage
      </span>
      <h1 class="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
        Your <span class="pp-gradient-text">divorce roadmap</span>
      </h1>
      <p class="mt-2 max-w-2xl text-slate-600 dark:text-slate-300">
        A step-by-step map of the Illinois divorce process. Click any step for the forms you need,
        what each must contain, deadlines, who to call, and the official source behind it.
      </p>
    </div>
    <div class="flex shrink-0 items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
      <div class="text-right">
        <div class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ main_line|length }}</div>
        <div>core steps</div>
      </div>
      <div class="h-10 w-px bg-slate-200 dark:bg-slate-700"></div>
      <div class="text-right">
        <div class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ subflows|length }}</div>
        <div>branches</div>
      </div>
      <div class="h-10 w-px bg-slate-200 dark:bg-slate-700"></div>
      <div class="text-right">
        <div class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ stats.chunks }}</div>
        <div>cited sources</div>
      </div>
    </div>
  </div>
</section>

<div class="grid gap-6 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
  <!-- Stepper -->
  <div class="lg:sticky lg:top-24 lg:self-start">
    <div class="pp-rail relative space-y-2">
      {% for step in main_line %}
      <button
        class="pp-step pp-focus relative flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white/70 px-3 py-3 text-left dark:border-slate-800 dark:bg-slate-900/50"
        data-step="{{ step.id }}"
        data-active="{{ 'true' if loop.first else 'false' }}"
        hx-get="/step/{{ step.id }}"
        hx-target="#step-panel"
        hx-swap="innerHTML"
        onclick="document.querySelectorAll('.pp-step').forEach(b=>b.dataset.active='false'); this.dataset.active='true';">
        <span class="pp-bubble shrink-0">{{ loop.index }}</span>
        <span class="min-w-0">
          <span class="block truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ step.title }}</span>
          {% if step.transitions|selectattr('when')|list %}
          <span class="mt-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-amber-600 dark:text-amber-400">
            <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
            has branches
          </span>
          {% endif %}
        </span>
      </button>
      {% endfor %}
    </div>

    <!-- Conditional sub-flows -->
    <div class="mt-6">
      <h3 class="px-1 text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">If your case is different</h3>
      <div class="mt-2 space-y-2">
        {% for step in subflows %}
        <button
          class="pp-step pp-focus relative flex w-full items-center gap-3 rounded-xl border border-dashed border-amber-300/70 bg-amber-50/40 px-3 py-2.5 text-left dark:border-amber-500/30 dark:bg-amber-500/5"
          data-step="{{ step.id }}"
          hx-get="/step/{{ step.id }}"
          hx-target="#step-panel"
          hx-swap="innerHTML"
          onclick="document.querySelectorAll('.pp-step').forEach(b=>b.dataset.active='false'); this.dataset.active='true';">
          <span class="pp-bubble pp-bubble--sub shrink-0">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
          </span>
          <span class="min-w-0">
            <span class="block truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ step.title }}</span>
            {% if step.trigger %}<span class="block truncate text-[11px] text-slate-500 dark:text-slate-400">when {{ step.trigger }}</span>{% endif %}
          </span>
        </button>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Detail panel (htmx target) -->
  <div id="step-panel" hx-get="/step/{{ flow.start }}" hx-trigger="load" hx-swap="innerHTML">
    <div class="pp-card grid min-h-[24rem] place-items-center p-8 text-slate-400">
      Loading the first step…
    </div>
  </div>
</div>
{% endblock %}