{% 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;">◈ AADC Canvas</div>

    <a href="/agentic-ai/canvas" target="_blank"
       style="display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#0a84ff,#0055cc);color:#fff;text-decoration:none;border-radius:8px;padding:.6rem 1.4rem;font-size:.82rem;font-weight:700;margin-bottom:1.25rem;">
      🛡 Open AADC Canvas ↗
    </a>

    <p style="font-size:.8rem;color:var(--text-secondary);margin:0 0 .75rem;">
      Build your design in the canvas, then click <strong>Save</strong> and paste your
      <strong>Design ID</strong> below.
    </p>

    <div style="display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;">
      <input id="design-id-{{ sidx }}" type="text" placeholder="design-id (e.g. d_abc123)"
             style="flex:1;min-width:200px;background:#111;border:1px solid var(--fa-border);color:var(--text-primary);border-radius:6px;padding:.5rem .75rem;font-size:.82rem;font-family:monospace;" />
      <button id="assess-btn-{{ sidx }}" onclick="assessDesign({{ sidx }})"
              style="background:linear-gradient(135deg,#30d158,#248a3d);color:#fff;border:none;border-radius:6px;padding:.55rem 1.2rem;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;">
        ◈ Assess Design
      </button>
    </div>

    <div id="assess-result-{{ sidx }}" style="display:none;margin-top:1rem;"></div>
  </div>

  <div class="fa-hint-panel" id="hint-panel-{{ sidx }}"></div>

  <div class="fa-controls">
    <button class="fa-btn-hint" onclick="getHint({{ sidx }})">💡 Ask Sensei (−10 XP)</button>
    <button class="fa-btn-next" id="next-btn-{{ sidx }}" onclick="nextStep({{ sidx }})" style="display:none;">✓ Design Approved → Next Step</button>
  </div>
</div>

<script>
async function assessDesign(idx) {
  const designId = document.getElementById('design-id-' + idx).value.trim();
  if (!designId) { alert('Paste your Design ID first.'); return; }

  const btn = document.getElementById('assess-btn-' + idx);
  const panel = document.getElementById('assess-result-' + idx);
  btn.disabled = true;
  btn.textContent = '◈ Assessing...';
  panel.style.display = 'none';

  try {
    const step = STEPS[idx];
    const cfg = step.config_schema_json || {};
    const required = cfg.required_checks || [];
    const minScore = cfg.min_score || 70;

    const resp = await fetch('/api/academy/step/design-assess', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        step_id: step.id,
        mission_id: MISSION.id,
        mission_slug: MISSION.slug,
        design_id: designId,
        required_checks: required,
        min_score: minScore,
        hints_used: hintsUsed,
        base_xp: step.xp_partial || 100,
        skill_tag: step.skill_tag || '',
        mission_complete: idx === STEPS.length - 1,
        mission_xp: MISSION.xp_reward || 400,
      })
    });
    const d = await resp.json();
    panel.style.display = 'block';

    if (d.passed) {
      panel.innerHTML = `
        <div style="background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.3);border-radius:8px;padding:1rem;font-size:.82rem;color:var(--fa-green);">
          <strong>✓ Design Approved</strong> — Score: <strong>${d.score}/100</strong><br>
          <span style="color:var(--text-secondary);">Checks passed: ${(d.checks_passed||[]).join(', ')||'all'}</span><br><br>
          ${d.xp_event ? '+' + d.xp_event.xp_earned + ' XP earned' : ''}
        </div>`;
      document.querySelectorAll('#step-nav li')[idx]?.classList.add('done');
      document.getElementById('next-btn-' + idx).style.display = 'inline-block';
    } else {
      const failed = d.failed_checks || [];
      panel.innerHTML = `
        <div style="background:rgba(255,45,85,.06);border:1px solid rgba(255,45,85,.2);border-radius:8px;padding:1rem;font-size:.82rem;color:#ff6b6b;">
          <strong>✗ Not Yet</strong> — Score: <strong>${d.score}/100</strong> (need ${minScore})<br>
          <strong>Failing checks:</strong> ${failed.join(', ') || 'none'}<br>
          <span style="color:var(--text-secondary);font-size:.78rem;">Use aadc.recommend in the canvas to see which nodes to add.</span>
        </div>`;
    }
  } catch(e) {
    panel.style.display = 'block';
    panel.innerHTML = `<div style="background:rgba(255,45,85,.06);border:1px solid rgba(255,45,85,.2);border-radius:8px;padding:1rem;color:#ff6b6b;font-size:.82rem;">Assessment error: ${e.message}</div>`;
  }
  btn.disabled = false;
  btn.textContent = '◈ Assess Design';
}
</script>