{% set sidx = loop.index0 %}
<div class="fa-code-layout">
  {% if step.content_md %}
  <div class="fa-step-content">{{ step.content_md | safe }}</div>
  {% endif %}

  <div class="fa-editor-wrap">
    <textarea class="fa-cm-target" data-step-idx="{{ sidx }}" id="code-editor-{{ sidx }}">{{ step.starter_code | default('# Write your solution here\n') }}</textarea>
  </div>

  <div class="fa-controls">
    <button class="fa-btn-run" id="run-btn-{{ sidx }}" onclick="runCode({{ sidx }})">▶ Run Code</button>
    <button class="fa-btn-next" id="next-btn-{{ sidx }}" onclick="nextStep({{ sidx }})">✓ Next Step →</button>
    <button class="fa-btn-hint" onclick="getHint({{ sidx }})">💡 Ask Sensei (−10 XP)</button>
  </div>

  <div class="fa-output-panel" id="output-{{ sidx }}">// Output will appear here after Run</div>
  <div class="fa-hint-panel" id="hint-panel-{{ sidx }}"></div>
</div>