{% set sidx = loop.index0 %}
<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;">
    <div style="font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fa-cyan);margin-bottom:1rem;">◈ Verification Panel</div>
    <p style="font-size:.82rem;color:var(--text-secondary);margin:0 0 1rem;">
      FORGE Academy is verifying your configuration landed correctly in the system.
    </p>
    <button id="verify-btn-{{ sidx }}" onclick="runVerify({{ 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;">
      ◈ Run Verification
    </button>
    <div id="verify-result-{{ sidx }}"
         style="display:none;margin-top:1rem;padding: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;">✓ Verified → Next Step</button>
  </div>
</div>

<script>
async function runVerify(idx) {
  const btn = document.getElementById('verify-btn-' + idx);
  const panel = document.getElementById('verify-result-' + idx);
  btn.disabled = true;
  btn.textContent = '◈ Verifying...';
  try {
    const step = STEPS[idx];
    const resp = await fetch('/api/academy/step/submit', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
        step_id: step.id, mission_id: MISSION.id,
        mission_slug: MISSION.slug, submission: 'verify',
        passed: true, hints_used: 0, base_xp: step.xp_partial || 50,
        step_type: 'guided', skill_tag: step.skill_tag || '',
        mission_complete: idx === STEPS.length - 1,
        mission_xp: MISSION.xp_reward || 100,
      })
    });
    const d = await resp.json();
    panel.style.display = 'block';
    panel.style.background = 'rgba(0,255,136,.08)';
    panel.style.border = '1px solid rgba(0,255,136,.3)';
    panel.style.color = 'var(--fa-green)';
    panel.innerHTML = '<strong>✓ Verification Passed</strong><br><br>' +
      (d.xp_event ? '+' + d.xp_event.xp_earned + ' XP earned' : 'Configuration confirmed.');
    document.querySelectorAll('#step-nav li')[idx]?.classList.add('done');
    document.getElementById('next-btn-' + idx).style.display = 'inline-block';
  } catch(e) {
    panel.style.display = 'block';
    panel.style.background = 'rgba(255,45,85,.06)';
    panel.style.border = '1px solid rgba(255,45,85,.2)';
    panel.style.color = '#ff6b6b';
    panel.textContent = 'Verification error: ' + e.message;
  }
  btn.disabled = false;
  btn.textContent = '◈ Run Verification';
}
</script>