{% set sidx = loop.index0 %}
{% set schema = step.config_schema | default({}) %}
<div class="fa-guided-step">
  {% if step.content_md %}
  <div class="fa-step-content">{{ step.content_md | safe }}</div>
  {% endif %}

  <div style="background:var(--fa-card);border:1px solid var(--fa-border);border-radius:10px;padding:1.5rem;margin-bottom:1rem;" id="reflect-{{ sidx }}">
    <div style="font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fa-purple,#9b59b6);margin-bottom:1rem;">◆ Knowledge Check</div>

    {% if schema.question %}
    <p style="font-size:.95rem;font-weight:600;margin:0 0 1.2rem;line-height:1.5;">{{ schema.question }}</p>
    <div id="choices-{{ sidx }}">
      {% for opt in schema.options | default([]) %}
      <label style="display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .9rem;border:1px solid var(--fa-border);border-radius:8px;cursor:pointer;margin-bottom:.5rem;transition:all .15s;"
             class="reflect-choice" data-correct="{{ opt.correct | default(false) | lower }}"
             onclick="checkAnswer({{ sidx }}, this, {{ opt.correct | default(false) | lower }})">
        <span style="width:18px;height:18px;border-radius:50%;border:1px solid var(--fa-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.65rem;margin-top:.1rem;" class="radio-dot"></span>
        <span style="font-size:.88rem;">{{ opt.text }}</span>
      </label>
      {% endfor %}
    </div>
    {% else %}
    <p style="color:var(--text-secondary);font-size:.82rem;">Reflect on what you've learned, then continue.</p>
    <button onclick="autoPassReflect({{ sidx }})"
            style="background:linear-gradient(135deg,#9b59b6,#7d3c98);color:#fff;border:none;border-radius:6px;padding:.55rem 1.4rem;font-size:.82rem;font-weight:700;cursor:pointer;">
      ◆ I Understand → Continue
    </button>
    {% endif %}

    <div id="reflect-feedback-{{ sidx }}"
         style="display:none;margin-top:1rem;padding:.9rem 1rem;border-radius:8px;font-size:.82rem;"></div>
  </div>

  <div class="fa-controls">
    <button class="fa-btn-next" id="next-btn-{{ sidx }}" onclick="nextStep({{ sidx }})" style="display:none;">◆ Next Step →</button>
  </div>
</div>

<script>
async function checkAnswer(idx, el, isCorrect) {
  const choices = document.querySelectorAll('#choices-' + idx + ' .reflect-choice');
  choices.forEach(c => c.style.pointerEvents = 'none');
  const feedback = document.getElementById('reflect-feedback-' + idx);
  if (isCorrect) {
    el.style.borderColor = 'var(--fa-green)';
    el.style.background = 'rgba(0,255,136,.08)';
    el.querySelector('.radio-dot').textContent = '✓';
    el.querySelector('.radio-dot').style.borderColor = 'var(--fa-green)';
    el.querySelector('.radio-dot').style.color = 'var(--fa-green)';
    feedback.style.display = 'block';
    feedback.style.background = 'rgba(0,255,136,.06)';
    feedback.style.border = '1px solid rgba(0,255,136,.25)';
    feedback.style.color = 'var(--fa-green)';
    feedback.textContent = '✓ Correct. +' + (STEPS[idx].xp_partial || 50) * 1.25 + ' XP (first try bonus)';
    await submitStep(idx, 'correct', true);
    document.getElementById('next-btn-' + idx).style.display = 'inline-block';
  } else {
    el.style.borderColor = '#FF2D55';
    el.style.background = 'rgba(255,45,85,.06)';
    el.querySelector('.radio-dot').textContent = '✗';
    el.querySelector('.radio-dot').style.borderColor = '#FF2D55';
    el.querySelector('.radio-dot').style.color = '#ff6b6b';
    const correct = document.querySelector('#choices-' + idx + ' .reflect-choice[data-correct="true"]');
    if (correct) {
      correct.style.borderColor = 'var(--fa-green)';
      correct.style.background = 'rgba(0,255,136,.05)';
    }
    feedback.style.display = 'block';
    feedback.style.background = 'rgba(255,45,85,.06)';
    feedback.style.border = '1px solid rgba(255,45,85,.2)';
    feedback.style.color = '#ff9090';
    const step = STEPS[idx];
    const explanation = (step.config_schema && step.config_schema.explanation) || 'Review the concept and try again next time.';
    feedback.textContent = '✗ Not quite. ' + explanation;
    await submitStep(idx, 'incorrect', true);
    document.getElementById('next-btn-' + idx).style.display = 'inline-block';
  }
}
async function autoPassReflect(idx) {
  await submitStep(idx, 'reflected', true);
  document.getElementById('next-btn-' + idx).style.display = 'inline-block';
}
</script>