{#
  ── S-143 · Step 3 (Configure) ───────────────────────────────────────────
  Embeds the S-118 spec grid via ``GET /api/spec`` with ``Accept: text/html``
  (the same content negotiation Studio uses). Per-row method picks land via
  ``PUT /api/spec/tables/{t}/columns/{c}`` (S-119); per-cell method swaps go
  through the S-120 ``method_picker`` Alpine island which we mount once here.

  The ``data-wizard="true"`` attribute lets the global ``spec_grid_rerender.js``
  hook stay no-op outside the Studio shell — the wizard does not need the
  per-column re-preview hot-reload pipeline.
── #}
{% extends "wizard/_step_base.html" %}
{% block content %}
  <div data-wizard="true" class="space-y-3">
    <p class="text-sm opacity-80">
      Tune per-column generators, distributions, and row counts. The picker
      swaps generator methods inline; the spec persists to <code>.dbsprout/cache</code>
      so reloading the page keeps your edits.
    </p>
    {# S-145: Use-LLM opt-in. The heuristic spec is already in place from the
       GET-side entry hook so the grid below renders immediately; this button
       lets the user trade time for a (potentially) richer LLM-built spec and
       swap the body in place when the request returns. #}
    <div class="flex items-center gap-2">
      <button
        type="button"
        class="btn btn-sm btn-outline"
        hx-post="/wizard/step/3/llm-spec"
        hx-target="#wizard-body"
        hx-swap="innerHTML"
        hx-indicator="#llm-spinner"
      >
        Use LLM (slower, optional)
      </button>
      <span
        id="llm-spinner"
        class="htmx-indicator loading loading-spinner loading-xs"
        aria-hidden="true"
      ></span>
      <span class="text-xs opacity-60">
        Replaces the heuristic spec with one built by the local LLM provider.
      </span>
    </div>
    <div
      id="wizard-spec-grid-slot"
      class="card bg-base-100 shadow p-3"
      hx-get="/api/spec"
      hx-headers='{"Accept": "text/html"}'
      hx-trigger="load"
      hx-swap="innerHTML"
    >
      <div class="text-xs opacity-60">Loading spec grid…</div>
    </div>

    {# Mount the shared method picker so the per-row pills can dispatch
       ``studio:open-method-picker`` events. The picker is page-level Alpine
       — including it once here matches the Studio shell pattern. #}
    {% include "studio/method_picker.html" %}
  </div>
{% endblock %}