{#
  ── S-143 · Step 1 (Connect) ─────────────────────────────────────────────
  Real connect surface: a small Alpine island POSTs to ``/api/connect`` with a
  DSN, and a native multipart form POSTs to ``/api/schema/load`` for file
  uploads. The success path stamps ``workspace.schema`` server-side, which
  unblocks the Step 1 → 2 gate (see ``WizardState.can_advance_from``).

  After either path returns 2xx, the small ``#wizard-connect-status`` slot
  refreshes via ``hx-get="/api/schema"`` so the user sees how many tables
  were loaded before clicking Next.

  The ``data-wizard="true"`` attribute on the root keeps the JS scoped — the
  same form pattern is reused on the Studio page (no clash).
── #}
{% extends "wizard/_step_base.html" %}
{% block content %}
  <div data-wizard="true" class="space-y-4">
    <p class="text-sm opacity-80">
      Connect to a live database (Postgres / MySQL / SQLite / MSSQL) or upload a
      schema file (SQL DDL, DBML, Mermaid, PlantUML, Prisma, Django). One of the
      two paths must succeed before you can advance to Review.
    </p>

    {# ── Live DB connect ───────────────────────────────────────────────── #}
    <section class="card bg-base-200" aria-labelledby="wizard-connect-h">
      <div class="card-body">
        <h3 id="wizard-connect-h" class="card-title text-sm">Live database</h3>
        <div
          x-data="{
            url: '',
            pending: false,
            error: null,
            ok: false,
            async submit() {
              if (!this.url.trim()) { this.error = 'URL is required'; return; }
              this.pending = true; this.error = null; this.ok = false;
              try {
                const resp = await fetch('/api/connect', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ url: this.url.trim() }),
                });
                const body = await resp.json().catch(() => ({}));
                if (!resp.ok) {
                  this.error = (body.detail && body.detail.message) || resp.statusText;
                  return;
                }
                this.ok = true;
                window.dispatchEvent(new CustomEvent('wizard:schema-loaded', {detail: body}));
              } catch (err) { this.error = String(err); }
              finally { this.pending = false; }
            },
          }"
          class="space-y-2"
        >
          <label class="form-control w-full">
            <span class="label-text text-xs opacity-70">SQLAlchemy URL</span>
            <input
              type="text"
              x-model="url"
              placeholder="postgresql+psycopg://user:pass@localhost:5432/dbname"
              class="input input-bordered input-sm font-mono"
              autocomplete="off"
            />
          </label>
          <button type="button" class="btn btn-primary btn-sm"
                  x-on:click="submit()" :disabled="pending"
                  data-testid="wizard-connect-submit">
            <span x-show="!pending">Connect</span>
            <span x-show="pending">Connecting…</span>
          </button>
          <p class="text-xs text-error" x-show="error" x-text="error"></p>
          <p class="text-xs text-success" x-show="ok">Connected. Loading schema summary…</p>
        </div>
      </div>
    </section>

    {# ── File upload ───────────────────────────────────────────────────── #}
    <section class="card bg-base-200" aria-labelledby="wizard-upload-h">
      <div class="card-body">
        <h3 id="wizard-upload-h" class="card-title text-sm">Upload a schema file</h3>
        <form
          method="post"
          action="/api/schema/load"
          enctype="multipart/form-data"
          hx-post="/api/schema/load"
          hx-encoding="multipart/form-data"
          hx-target="#wizard-connect-status"
          hx-swap="innerHTML"
          class="space-y-2"
        >
          <input type="file" name="file"
                 class="file-input file-input-bordered file-input-sm w-full"
                 aria-label="Schema file" required />
          <label class="form-control">
            <span class="label-text text-xs opacity-70">Parser (optional)</span>
            <select name="parser" class="select select-bordered select-sm">
              <option value="">auto-detect</option>
              <option value="sql">sql</option>
              <option value="dbml">dbml</option>
              <option value="mermaid">mermaid</option>
              <option value="plantuml">plantuml</option>
              <option value="prisma">prisma</option>
              <option value="django">django</option>
            </select>
          </label>
          <button type="submit" class="btn btn-secondary btn-sm">Upload</button>
        </form>
      </div>
    </section>

    {# ── Live status slot ─────────────────────────────────────────────── #}
    <div
      id="wizard-connect-status"
      class="text-xs opacity-70"
      hx-get="/api/schema"
      hx-trigger="wizard:schema-loaded from:body"
      hx-swap="innerHTML"
    >
      <span class="opacity-60">No schema loaded yet — connect or upload a file above.</span>
    </div>
  </div>
{% endblock %}