{% extends "base.html" %}
{% block title %}DBSprout — Wizard{% endblock %}

{% block head_extra %}
  {# ── S-143 wizard head assets ──────────────────────────────────────────
     The wizard steps include shared Alpine islands (method-picker, write-
     guard modal, _studio_console.html). Mounting Alpine + the studio-console
     factory at shell level means each step body is just markup — no per-step
     script-tag drift, and HTMX swaps between bodies do not re-load Alpine. #}
  <script defer src="/static/alpine.min.js"></script>
  <script src="/static/studio_console.js"></script>
  <script>
    /* Bridge for the generate launcher inside ``_studio_console.html`` —
       lets the form hand off the WebSocket id to the console factory. */
    window.studioJobStart = function (jobId) {
      window.dispatchEvent(new CustomEvent('studio:job-start', { detail: { jobId: jobId } }));
    };
  </script>
{% endblock %}

{#
  ── S-142 Wizard shell ───────────────────────────────────────────────────
  The wizard is a guided walk-through of the six DBSprout phases. The shell
  hosts two stable surfaces:

    * ``#wizard-rail`` — 6-step left rail (see ``_rail.html``).
    * ``#wizard-body`` — body slot. Initially populated with the current
      step's placeholder; HTMX swaps replace the inner HTML on every
      rail click + step submit.

  S-143 (Wave 2) replaces the placeholder step bodies; this shell + the
  rail partial stay put so S-143 only touches step content.
── #}

{% block content %}
  <div id="wizard"
       class="grid gap-4 grid-cols-1 md:[grid-template-columns:minmax(16rem,1fr)_3fr] min-h-[calc(100vh-12rem)]"
       role="application"
       aria-label="DBSprout Wizard">
    <aside id="wizard-rail-panel" data-panel="rail-panel"
           role="navigation" aria-label="Wizard step rail"
           class="card bg-base-100 shadow p-3 overflow-y-auto">
      {% block rail %}{% include "wizard/_rail.html" %}{% endblock %}
    </aside>

    <main id="wizard-body" data-panel="wizard-body"
          role="region" aria-label="Current wizard step"
          class="overflow-auto">
      {% block body %}{% include "wizard/step_" ~ current_step ~ ".html" %}{% endblock %}
    </main>
  </div>
{% endblock %}