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

  {% set schema = step.config_schema | default({}) %}
  <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-orange);margin-bottom:1rem;">⚙ Configuration Panel</div>

    <form id="configure-form-{{ sidx }}">
      {% if schema.fields %}
      {% for field in schema.fields %}
      <div class="fa-form-group" style="margin-bottom:.9rem;">
        <label style="font-size:.75rem;color:var(--text-secondary);display:block;margin-bottom:.3rem;">
          {{ field.label | default(field.name) }}
          {% if field.required %}<span style="color:#ff6b6b">*</span>{% endif %}
        </label>
        {% if field.type == 'select' %}
        <select name="{{ field.name }}" style="width:100%;background:#0d1221;border:1px solid var(--fa-border);color:var(--text-primary);border-radius:6px;padding:.5rem .8rem;font-size:.85rem;">
          {% for opt in field.options | default([]) %}
          <option value="{{ opt.value | default(opt) }}">{{ opt.label | default(opt) }}</option>
          {% endfor %}
        </select>
        {% elif field.type == 'checkbox' %}
        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
          <input type="checkbox" name="{{ field.name }}" value="1"
                 {% if field.default %}checked{% endif %}
                 style="accent-color:var(--fa-orange);">
          <span style="font-size:.82rem;">{{ field.hint | default(field.help | default('')) }}</span>
        </label>
        {% elif field.type == 'checkboxes' %}
        <div style="display:flex;flex-direction:column;gap:.4rem;">
          {% for opt in field.options | default([]) %}
          <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
            <input type="checkbox" name="{{ field.name }}" value="{{ opt }}"
                   style="accent-color:var(--fa-orange);">
            <span style="font-size:.82rem;">{{ opt }}</span>
          </label>
          {% endfor %}
        </div>
        {% elif field.type == 'textarea' %}
        <textarea name="{{ field.name }}" rows="4"
                  placeholder="{{ field.placeholder | default('') }}"
                  style="width:100%;background:#0d1221;border:1px solid var(--fa-border);color:var(--text-primary);border-radius:6px;padding:.5rem .8rem;font-size:.82rem;font-family:monospace;resize:vertical;"></textarea>
        {% else %}
        <input type="{{ field.type | default('text') }}" name="{{ field.name }}"
               placeholder="{{ field.placeholder | default('') }}"
               style="width:100%;background:#0d1221;border:1px solid var(--fa-border);color:var(--text-primary);border-radius:6px;padding:.5rem .8rem;font-size:.85rem;">
        {% endif %}
        {% if field.hint %}
        <div style="font-size:.72rem;color:var(--text-secondary);margin-top:.3rem;opacity:.75;">{{ field.hint }}</div>
        {% endif %}
      </div>
      {% endfor %}
      {% else %}
      <p style="color:var(--text-secondary);font-size:.82rem;">
        Click Configure to execute this action with default settings.
      </p>
      {% endif %}

      <button type="button" id="configure-btn-{{ sidx }}" onclick="submitConfigure({{ sidx }})"
              style="background:linear-gradient(135deg,var(--fa-cyan),#008db3);color:#0a0a14;border:none;border-radius:6px;padding:.55rem 1.4rem;font-size:.82rem;font-weight:700;cursor:pointer;margin-top:.5rem;">
        ⚙ Configure →
      </button>
    </form>

    <div id="configure-result-{{ sidx }}"
         style="display:none;margin-top:1rem;background:#060910;border:1px solid var(--fa-border);border-radius:6px;padding:1rem;font-family:monospace;font-size:.78rem;color:var(--fa-green);white-space:pre-wrap;max-height:200px;overflow-y:auto;"></div>
  </div>

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

<script>
async function submitConfigure(idx) {
  const form = document.getElementById('configure-form-' + idx);
  const btn = document.getElementById('configure-btn-' + idx);
  const resultPanel = document.getElementById('configure-result-' + idx);
  btn.disabled = true;
  btn.textContent = '⚙ Configuring...';
  const formData = new FormData(form);
  const config = {};
  for (const [k,v] of formData.entries()) {
    if (k in config) {
      config[k] = Array.isArray(config[k]) ? [...config[k], v] : [config[k], v];
    } else { config[k] = v; }
  }
  const step = STEPS[idx];
  try {
    const resp = await fetch('/api/academy/step/configure', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({action: step.config_schema?.action || 'deploy_pattern', config})
    });
    const d = await resp.json();
    resultPanel.style.display = 'block';
    resultPanel.textContent = JSON.stringify(d, null, 2);
    if (d.status === 'ok' || d.status === 'partial') {
      resultPanel.style.borderColor = 'var(--fa-green)';
      await submitStep(idx, JSON.stringify(config), true);
      document.getElementById('next-btn-' + idx).style.display = 'inline-block';
    }
  } catch(e) {
    resultPanel.style.display = 'block';
    resultPanel.textContent = 'Error: ' + e.message;
    resultPanel.style.color = '#ff6b6b';
  }
  btn.disabled = false;
  btn.textContent = '⚙ Configure →';
}
</script>