{# src/examen/templates/question.html #}
{% extends "base.html" %}
{% block title %}Q{{ qnum }} — {{ topic_label }}{% endblock %}
{% block content %}
<div class="progress-sliver" role="progressbar"
     aria-label="Quiz progress"
     aria-valuemin="0" aria-valuemax="{{ qtotal }}" aria-valuenow="{{ qnum }}">
  <div class="progress-sliver__fill" style="width: {{ (qnum * 100 / qtotal)|round(1) }}%"></div>
</div>

{% include "_bead_row.html" %}

<section class="question">
  <h1 class="question__topic">{{ topic_label }}</h1>
  <p class="question__prompt">{{ question.prompt }}</p>

  {% for block in code_blocks %}
    {% with block=block %}{% include "_code_block.html" %}{% endwith %}
  {% endfor %}

  <form hx-post="/session/{{ session_id }}/question/{{ question.id }}/submit"
        hx-target="body" hx-swap="outerHTML transition:true"
        class="question__form">
    <fieldset class="chip-fieldset">
      <legend class="chip-fieldset__legend">How confident are you?</legend>
      <p class="kbd-hint">
        Press <kbd>1</kbd>–<kbd>5</kbd> for confidence · <kbd>Enter</kbd> to submit
      </p>
      <div class="chip-row" role="radiogroup" aria-label="Confidence rating, 1 lowest to 5 highest">
        {% for n in range(1, 6) %}
          {% with chip_number=n,
                  chip_label=chip_labels[n-1],
                  chip_field_name="confidence",
                  checked=False %}
            {% include "_chip.html" %}
          {% endwith %}
        {% endfor %}
      </div>
    </fieldset>

    {% if question.type == "mc" %}
      <fieldset class="answer-fieldset">
        <legend class="answer-fieldset__legend">Pick the best answer</legend>
        <div class="answer-options" role="radiogroup">
          {% for opt in question.answer.options %}
            <label class="answer-option">
              <input type="radio" name="choice" value="{{ opt.id }}" required>
              <span>{{ opt.text }}</span>
            </label>
          {% endfor %}
        </div>
      </fieldset>
    {% elif question.type == "blast_radius" %}
      <fieldset class="answer-fieldset">
        <legend class="answer-fieldset__legend">Select every file affected — at least one</legend>
        <div class="answer-options" data-min-checked="1">
          {% for cand in question.answer.candidates %}
            <label class="answer-option">
              <input type="checkbox" name="choice" value="{{ cand }}">
              <span>{{ cand }}</span>
            </label>
          {% endfor %}
        </div>
      </fieldset>
    {% endif %}

    <button type="submit" id="submit-btn" disabled>Submit answer</button>
  </form>
</section>

<script>
  (function () {
    var form = document.querySelector(".question__form");
    if (!form) return;
    var btn = form.querySelector("#submit-btn");

    function ready() {
      var conf = form.querySelector("input[name='confidence']:checked");
      var ans = form.querySelectorAll("input[name='choice']:checked");
      return !!conf && ans.length > 0;
    }
    function refresh() { if (btn) btn.disabled = !ready(); }
    form.addEventListener("change", refresh);
    refresh();

    form.addEventListener("htmx:beforeRequest", function () {
      var checked = form.querySelectorAll('input[name="choice"]:checked');
      checked.forEach(function (inp) {
        var lbl = inp.closest(".answer-option");
        if (lbl) lbl.classList.add("flash--good");
      });
    });

    // Focus the first confidence chip's hidden radio. The :focus-within rule on
    // .chip shows the focus ring. autofocus= would no-op because htmx body-swaps
    // skip the autofocus heuristic.
    var firstInput = form.querySelector("input[name='confidence']");
    if (firstInput && typeof firstInput.focus === "function") {
      setTimeout(function () { firstInput.focus({ preventScroll: true }); }, 60);
    }
  })();
</script>
{% endblock %}