{% extends "base.html" %}
{% block title %}{{ lesson.title }} - LLM Lab{% endblock %}

{% block content %}
<article class="lesson" data-lesson="{{ lesson.id }}">
  <p class="crumb"><a href="/">Map</a> / stage {{ lesson.stage }}</p>
  <h1>{{ lesson.title }}</h1>
  <p class="srcline">
    <span class="kind k-{{ lesson.kind }}">{{ lesson.kind }}</span>
    <span>{{ lesson.est_minutes }} min</span>
    <span>source: {{ lesson.source }}</span>
    <code>{{ lesson.id }}</code>
  </p>

  {# What the database already knew but this page used to throw away on reload.
     Bound up front because `state` is an empty dict for a lesson never attempted,
     and Jinja's Undefined raises the moment you compare it to a number. #}
  {% set status = state.status or 'not_started' %}
  {% set qscore = state.quiz_score or 0 %}
  {% set tpass = state.tests_pass or 0 %}
  {% set ttotal = state.tests_total or 0 %}
  <p class="lstate s-{{ status }}" id="lessonstate" data-status="{{ status }}">
    <span class="dot"></span>
    <strong class="label">
      {%- if status == 'done' %}Completed
      {%- elif status == 'in_progress' %}In progress
      {%- else %}Not started yet{%- endif -%}
    </strong>
    {% if lesson.quiz %}
    <span class="bit">quiz {{ (qscore * 100) | round | int }}%{%
      if state.quiz_ts %} &middot; {{ state.quiz_ts|ago }}{% endif %}</span>
    {% endif %}
    {% if has_exercise %}
    <span class="bit">tests {{ tpass }}/{{ ttotal }}{%
      if state.tests_ts %} &middot; {{ state.tests_ts|ago }}{% endif %}</span>
    {% endif %}
    {% if can_mark_read %}
    <button id="markread" class="linkish"{% if state.read_ts %} hidden{% endif %}>Mark as read</button>
    {% endif %}
  </p>

  {% if locked %}
  <div class="warn">Prerequisite not finished: <a href="/lesson/{{ locked }}">{{ locked }}</a>.
    You can read on, but the ramp assumes you did that one first.</div>
  {% endif %}

  {% if lesson.stub %}
  <div class="warn">This lesson is a stub. Read <strong>{{ lesson.source }}</strong> directly.</div>
  {% endif %}

  {% if introduces %}
  <section class="card newterms">
    <h2>New terms in this lesson</h2>
    <dl>
      {% for term in introduces %}
      <dt>{{ term.forms[0] }}{% if term.expand %} <small>({{ term.expand }})</small>{% endif %}</dt>
      <dd>{{ term.plain }}</dd>
      {% endfor %}
    </dl>
  </section>
  {% endif %}

  <div class="body">{{ body_html|safe }}</div>

  {% if lesson.quiz %}
  <section class="card quiz">
    <h2>Check yourself</h2>
    <form id="quizform">
      {% for item in lesson.quiz %}
      {% set qi = loop.index0 %}
      <fieldset class="q" data-index="{{ qi }}" data-type="{{ item.type }}">
        <legend>{{ loop.index }}. {{ item.q }}</legend>
        {% if item.type in ("mcq", "multi") %}
          {% for option in item.options %}
          <label>
            <input type="{{ 'checkbox' if item.type == 'multi' else 'radio' }}"
                   name="q{{ qi }}" value="{{ loop.index0 }}">
            <span>{{ option }}</span>
          </label>
          {% endfor %}
          {% if item.type == "multi" %}<p class="hint">Select all that apply.</p>{% endif %}
        {% elif item.type == "numeric" %}
          <input type="text" inputmode="decimal" name="q{{ qi }}"
                 placeholder="a number">
        {% else %}
          <textarea name="q{{ qi }}" rows="5"
                    placeholder="Explain in your own words."></textarea>
          <details class="hint"><summary>What is being graded</summary>
            <ul>{% for point in item.rubric %}<li>{{ point }}</li>{% endfor %}</ul>
          </details>
        {% endif %}
        <p class="verdict" hidden></p>
      </fieldset>
      {% endfor %}
      <button type="submit">{% if state.quiz_ts %}Submit again{% else %}Submit answers{% endif %}</button>
      {% set qpassed = qscore >= mastery %}
      <span id="quizscore" class="pill {% if state.quiz_ts %}{{ 'pass' if qpassed else 'fail' }}{% endif %}"
            {% if not state.quiz_ts %}hidden{% endif %}>{{ (qscore * 100) | round | int }}%{{
              ' — passed' if qpassed else ' — keep going' }}</span>
    </form>
  </section>
  {% endif %}

  {% if has_exercise %}
  <section class="card exercise">
    <h2>Code exercise</h2>
    <p>Edit the files in PyCharm, then run the tests here.</p>
    <pre class="path">{{ exercise_path }}</pre>
    <button id="runtests">{% if state.tests_ts %}Run tests again{% else %}Run tests{% endif %}</button>
    {% set green = ttotal > 0 and tpass == ttotal %}
    <span id="testscore" class="pill {% if state.tests_ts %}{{ 'pass' if green else 'fail' }}{% endif %}"
          {% if not state.tests_ts %}hidden{% endif %}>{{ tpass }}/{{ ttotal }} passing</span>
    {# The last run's output survives a reload, so the failure you were reading
       is still there tomorrow morning. #}
    {% if state.tests_output %}
    <details class="lastrun" open>
      <summary>Last run, {{ state.tests_ts|ago }}</summary>
      <pre id="testout">{{ state.tests_output }}</pre>
    </details>
    {% else %}
    <pre id="testout" hidden></pre>
    {% endif %}
  </section>
  {% endif %}

  <section class="card journal">
    <h2>Design Journal</h2>
    <p>Any constant you chose or met in this lesson goes here. Stage 9 quizzes you on these rows.</p>
    <form id="journalform">
      <input type="hidden" name="lesson_id" value="{{ lesson.id }}">
      <div class="grid2">
        <label>Name<input name="name" required placeholder="CASCADE_THRESHOLD"></label>
        <label>Value<input name="value" required placeholder="0.7"></label>
        <label>Where it lives<input name="location" required placeholder="constants.py:207"></label>
        <label>How measured<input name="measured" placeholder="swept 0.5-0.8 on 110 rows"></label>
      </div>
      <label>Why this value<textarea name="why" rows="2" required></textarea></label>
      <label>What breaks if you move it<textarea name="breaks_if" rows="2"></textarea></label>
      <button type="submit">Add row</button>
    </form>
    {% if journal %}
    <table class="jtable">
      <tr><th>Name</th><th>Value</th><th>Where</th><th>Why</th></tr>
      {% for row in journal %}
      <tr><td><code>{{ row.name }}</code></td><td>{{ row.value }}</td>
          <td><code>{{ row.location }}</code></td><td>{{ row.why }}</td></tr>
      {% endfor %}
    </table>
    {% endif %}
  </section>
</article>

<script id="glossary-data" type="application/json">{{ glossary|tojson }}</script>
{% endblock %}