{% extends "base.html" %}
{% block bodyattr %} data-page="home"{% endblock %}
{% block headerextra %}
<span class="pill">{{ summary.done }}/{{ summary.total }} done &middot; {{ summary.pct }}%</span>
{% endblock %}

{% block content %}
<div class="hero">
  <h1 class="balance">The ramp</h1>
  <button id="replayintro" class="ghost" title="Replay the intro">replay intro</button>
</div>
<p class="lede">
  Work top to bottom. A lesson unlocks when its prerequisites are done, so no
  lesson can use a term you have not met yet. Press
  <kbd>{{ "⌘" }}K</kbd> to jump anywhere, or try
  <a href="/mirror">the Mirror</a> &mdash; it searches these lessons with a
  retriever you will eventually write yourself.
</p>

{% if due %}
<section class="card due">
  <h2>Due for review</h2>
  <ul class="inline">
    {% for row in due %}
      <li><a href="/lesson/{{ row.lesson_id }}">{{ row.lesson_id }}</a></li>
    {% endfor %}
  </ul>
</section>
{% endif %}

{% for stage in stages %}
<section class="stage">
  <div class="stagehead">
    <h2><span class="num">{{ "%02d"|format(stage.meta.n) }}</span> {{ stage.meta.title }}</h2>
    <div class="progress" title="{{ stage.done }} of {{ stage.total }}">
      <span style="width: {{ stage.pct }}%"></span>
    </div>
    <span class="count">{{ stage.done }}/{{ stage.total }}</span>
  </div>
  <p class="goal">{{ stage.meta.goal }}</p>
  <ol class="lessons">
    {% for row in stage.lessons %}
    <li class="{{ row.state.status or 'not_started' }}{% if row.locked %} locked{% endif %}">
      <a href="/lesson/{{ row.lesson.id }}">
        <span class="kind k-{{ row.lesson.kind }}">{{ row.lesson.kind }}</span>
        <span class="title">{{ row.lesson.title }}</span>
        <span class="meta">
          {{ row.lesson.est_minutes }}m
          {% if row.lesson.stub %}<em>stub</em>{% endif %}
          {% if row.locked %}<em>needs {{ row.locked }}</em>{% endif %}
        </span>
      </a>
    </li>
    {% endfor %}
  </ol>
</section>
{% endfor %}
{% endblock %}