{% extends "base.html" %}
{% block title %}Sraosha — {{ "New Contract" if mode == "create" else "Edit " + form.title }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/material-darker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/yaml/yaml.min.js"></script>
<style>
  .CodeMirror { height: 100%; min-height: 400px; border-radius: 0.5rem; font-size: 13px; }
  html.dark .CodeMirror { background: #1e1e1e; color: #e5e5e5; }
  .wizard-step { display: none; animation: wizardFadeIn 0.25s ease; }
  .wizard-step.active { display: block; }
  @keyframes wizardFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .stepper-line { height: 2px; flex: 1; }
  .stepper-line.completed { background: #4f46e5; }
  .stepper-line.upcoming  { background: #e5e7eb; }
  html.dark .stepper-line.upcoming { background: #374151; }

  .stepper-circle {
    width: 2.25rem; height: 2.25rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 600; transition: all 0.2s;
    flex-shrink: 0;
  }
  .stepper-circle.active    { background: #4f46e5; color: white; box-shadow: 0 0 0 4px rgba(79,70,229,0.15); }
  .stepper-circle.completed { background: #4f46e5; color: white; }
  .stepper-circle.upcoming  { background: white; color: #9ca3af; border: 2px solid #d1d5db; }
  html.dark .stepper-circle.active { box-shadow: 0 0 0 4px rgba(129,140,248,0.2); }
  html.dark .stepper-circle.upcoming { background: #111827; color: #9ca3af; border-color: #4b5563; }

  .stepper-label { font-size: 0.75rem; margin-top: 0.375rem; white-space: nowrap; }
  .stepper-label.active    { color: #4f46e5; font-weight: 600; }
  .stepper-label.completed { color: #4f46e5; }
  .stepper-label.upcoming  { color: #9ca3af; }
  html.dark .stepper-label.active,
  html.dark .stepper-label.completed { color: #a5b4fc; }

  .stepper-item { cursor: pointer; }
  .stepper-item.disabled { cursor: default; pointer-events: none; }

  .discover-toggle-btn.active { background: #eef2ff; color: #4338ca; border-color: #4338ca; }
  .discover-toggle-btn { background: white; color: #6b7280; border-color: #d1d5db; }
  html.dark .discover-toggle-btn.active { background: rgba(67, 56, 202, 0.25); color: #a5b4fc; border-color: #6366f1; }
  html.dark .discover-toggle-btn { background: #111827; color: #9ca3af; border-color: #4b5563; }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">

  <!-- Header -->
  <div class="flex items-center gap-4">
    <a href="{% if mode == 'edit' %}/ui/contracts/{{ contract_id }}{% else %}/ui/contracts{% endif %}"
       class="text-indigo-600 hover:underline text-sm dark:text-indigo-400">&larr; Back</a>
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
      {% if mode == "create" %}New Contract{% else %}Edit {{ form.title or contract_id }}{% endif %}
    </h1>
  </div>

  <!-- Errors -->
  {% if errors %}
  <div class="bg-red-50 border border-red-200 rounded-lg p-4 dark:bg-rose-950/40 dark:border-rose-900">
    <div class="flex items-start gap-3">
      <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <div>
        {% for err in errors %}
        <p class="text-sm text-red-700 dark:text-rose-200">{{ err }}</p>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  <!-- ============================================================ -->
  <!-- Stepper -->
  <!-- ============================================================ -->
  <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 px-8 py-5">
    <div class="flex items-center" id="wizard-stepper">
      {% set steps = [
        (1, "General Info",   "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"),
        (2, "Data Source",    "M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"),
        (3, "Models & Fields","M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"),
        (4, "Governance",     "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"),
        (5, "Review & Create","M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"),
      ] %}
      {% for num, label, icon in steps %}
        {% if num > 1 %}
        <div class="stepper-line upcoming flex-1" data-line="{{ num }}"></div>
        {% endif %}
        <div class="stepper-item flex flex-col items-center disabled" data-step="{{ num }}" onclick="wizardClickStep({{ num }})">
          <div class="stepper-circle {% if num == 1 %}active{% else %}upcoming{% endif %}" data-circle="{{ num }}">
            <span data-num="{{ num }}">{{ num }}</span>
          </div>
          <span class="stepper-label {% if num == 1 %}active{% else %}upcoming{% endif %}" data-slabel="{{ num }}">{{ label }}</span>
        </div>
      {% endfor %}
    </div>
  </div>

  <form method="post"
        action="{% if mode == 'edit' %}/ui/contracts/{{ contract_id }}/edit{% else %}/ui/contracts/new{% endif %}"
        id="contract-form">

    <!-- ============================================================ -->
    <!-- Step 1: General Info -->
    <!-- ============================================================ -->
    <div class="wizard-step active" data-step="1">
      <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-6 space-y-5">
        <div class="flex items-center gap-3 mb-1">
          <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-950/50">
            <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          </div>
          <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">General Information</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Identity, steward, and contact metadata. Link the contract to a <strong class="font-medium text-gray-600 dark:text-gray-300">compliance team</strong> in the Governance step.</p>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Contract ID <span class="text-red-400">*</span></label>
            <input type="text" name="contract_id" value="{{ form.contract_id }}"
                   placeholder="e.g. orders-v1"
                   {% if mode == 'edit' %}readonly class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm bg-gray-50 text-gray-500 cursor-not-allowed dark:border-gray-600 dark:bg-gray-800/80 dark:text-gray-400"{% else %}class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent"{% endif %} />
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Unique identifier for the contract</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Spec Version</label>
            <select name="spec_version" class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
              <option value="1.1.0" {% if form.spec_version == "1.1.0" %}selected{% endif %}>1.1.0</option>
              <option value="1.0.0" {% if form.spec_version == "1.0.0" %}selected{% endif %}>1.0.0</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Title <span class="text-red-400">*</span></label>
            <input type="text" name="title" value="{{ form.title }}"
                   placeholder="e.g. Customer Orders"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent" />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Version</label>
            <input type="text" name="version" value="{{ form.version }}"
                   placeholder="1.0.0"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent" />
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
          <textarea name="description" rows="3" placeholder="Describe this data contract..."
                    class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent resize-y">{{ form.description }}</textarea>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Steward <span class="text-gray-400 font-normal">(optional)</span></label>
            <input type="text" name="owner" value="{{ form.owner }}"
                   placeholder="e.g. Data platform"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent" />
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Maps to <code class="text-xs">info.owner</code> (human or org). Not the compliance team—set that under Governance.</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Contact Name</label>
            <input type="text" name="contact_name" value="{{ form.contact_name }}"
                   placeholder="Jane Doe"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent" />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Contact Email</label>
            <input type="text" name="contact_email" value="{{ form.contact_email }}"
                   placeholder="jane@company.com"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-transparent" />
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Published in <code class="text-xs">info.contact</code> for this contract—not alert routing.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- ============================================================ -->
    <!-- Step 2: Data Source (Servers) -->
    <!-- ============================================================ -->
    <div class="wizard-step" data-step="2">
      <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-6 space-y-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-950/50">
              <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/></svg>
            </div>
            <div>
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Data Source</h2>
              <p class="text-sm text-gray-500 dark:text-gray-400">Define the servers this contract connects to.</p>
            </div>
          </div>
          <button type="button" onclick="addServerRow()"
                  class="inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-lg transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Add Server
          </button>
        </div>

        <div id="servers-container" class="space-y-4">
          {% for server in form.servers %}
          <div class="server-row border border-gray-200 dark:border-gray-700 rounded-lg p-4 relative bg-gray-50/50 dark:bg-gray-800/40">
            <button type="button" onclick="this.closest('.server-row').remove()"
                    class="absolute top-3 right-3 text-gray-400 hover:text-red-500 transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Server Name</label>
                <input type="text" name="server_name[]" value="{{ server.name }}" placeholder="production"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Type</label>
                <select name="server_type[]" onchange="updateServerFields(this.closest('.server-row'))"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                  {% for t in [
                    "postgres", "mysql", "bigquery", "snowflake", "redshift",
                    "databricks", "trino", "duckdb", "mssql", "athena",
                    "clickhouse", "oracle", "vertica", "presto", "synapse",
                    "denodo", "dremio", "motherduck", "db2", "spark",
                    "fabric", "cloudsql", "dask",
                  ] %}
                  <option value="{{ t }}" {% if server.type == t %}selected{% endif %}>{{ t }}</option>
                  {% endfor %}
                </select>
              </div>
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Connection</label>
                <select name="server_connection[]" onchange="applyConnection(this)"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                  <option value="">-- manual --</option>
                  {% for c in connections|default([]) %}
                  <option value="{{ c.id }}" data-type="{{ c.server_type }}" data-connection-name="{{ c.name }}" {% if server.connection_name == c.name %}selected{% endif %}>{{ c.name }} ({{ c.server_type }})</option>
                  {% endfor %}
                </select>
              </div>
              <div data-field="host">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Host</label>
                <input type="text" name="server_host[]" value="{{ server.host }}" placeholder="db.company.com"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="port">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Port</label>
                <input type="text" name="server_port[]" value="{{ server.port }}" placeholder="5432"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="database">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Database</label>
                <input type="text" name="server_database[]" value="{{ server.database }}" placeholder="warehouse"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="schema">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Schema</label>
                <input type="text" name="server_schema[]" value="{{ server.schema }}" placeholder="public"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="account" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Account</label>
                <input type="text" name="server_account[]" value="{{ server.account }}" placeholder="xy12345.us-east-1"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="warehouse" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Warehouse</label>
                <input type="text" name="server_warehouse[]" value="{{ server.warehouse }}" placeholder="COMPUTE_WH"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="role" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Role</label>
                <input type="text" name="server_role[]" value="{{ server.role }}" placeholder="SYSADMIN"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="catalog" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Catalog</label>
                <input type="text" name="server_catalog[]" value="{{ server.catalog }}" placeholder="hive"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="httpPath" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">HTTP Path</label>
                <input type="text" name="server_httppath[]" value="{{ server.httpPath }}" placeholder="/sql/1.0/warehouses/abc123"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="project" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Project</label>
                <input type="text" name="server_project[]" value="{{ server.project }}" placeholder="my-gcp-project"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="dataset" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Dataset</label>
                <input type="text" name="server_dataset[]" value="{{ server.dataset }}" placeholder="analytics"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="location" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Location</label>
                <input type="text" name="server_location[]" value="{{ server.location }}" placeholder="us-east1"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div data-field="path" style="display:none">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Path</label>
                <input type="text" name="server_path[]" value="{{ server.path }}" placeholder="/data/warehouse.duckdb"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
            </div>
          </div>
          {% endfor %}
        </div>

        {% if not form.servers %}
        <div id="servers-empty" class="text-center py-8 text-gray-400 dark:text-gray-500">
          <svg class="w-10 h-10 mx-auto mb-2 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/></svg>
          <p class="text-sm">No servers yet. Click "Add Server" to define a data source.</p>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- ============================================================ -->
    <!-- Step 3: Models & Fields -->
    <!-- ============================================================ -->
    <div class="wizard-step" data-step="3">
      <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-6 space-y-5">
        <div class="flex items-center gap-3 mb-1">
          <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-950/50">
            <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
          </div>
          <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Models & Fields</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Define tables and their columns. Use auto-discover or add them manually.</p>
          </div>
        </div>

        <!-- Discover / Manual toggle -->
        <div class="flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 pb-4">
          <button type="button" onclick="setModelMode('manual')" id="btn-mode-manual"
                  class="discover-toggle-btn active inline-flex items-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            Manual
          </button>
          <button type="button" onclick="setModelMode('discover')" id="btn-mode-discover"
                  class="discover-toggle-btn inline-flex items-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            Auto-Discover
          </button>
        </div>

        <!-- Auto-Discover panel -->
        <div id="discover-panel" style="display:none" class="space-y-4">
          <div class="bg-indigo-50/50 border border-indigo-100 dark:bg-indigo-950/30 dark:border-indigo-900 rounded-lg p-4 space-y-4">
            <p class="text-sm text-indigo-700 dark:text-indigo-300">Select a server from Step 2 and discover tables automatically. If the server has a Connection linked, credentials are resolved automatically. Otherwise, enter credentials below.</p>
            <div class="flex items-center gap-3 flex-wrap">
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Server</label>
                <select id="discover-server-select" onchange="onDiscoverServerChange()"
                        class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 min-w-[200px]">
                  <option value="">-- select server --</option>
                </select>
              </div>
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Schema</label>
                <input type="text" id="discover-schema-input" value="public" placeholder="public"
                       class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 w-32" />
              </div>
              <div class="flex items-end gap-2">
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">&nbsp;</label>
                <button type="button" onclick="wizardDiscover()"
                        class="inline-flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                  Discover
                </button>
              </div>
            </div>
            <!-- Manual credentials (shown when no connection is linked) -->
            <div id="discover-creds-panel" class="grid grid-cols-2 gap-3" style="display:none">
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Username</label>
                <input type="text" id="discover-user-input" placeholder="postgres"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
              <div>
                <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Password</label>
                <input type="password" id="discover-password-input" placeholder="password"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              </div>
            </div>
            <div id="discover-conn-info" class="text-xs text-green-700 dark:text-emerald-400" style="display:none">
              <svg class="w-3.5 h-3.5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
              Credentials will be resolved from the linked Connection.
            </div>
            <div id="discover-spinner" class="text-sm text-gray-400" style="display:none">
              <svg class="animate-spin inline w-4 h-4 mr-1 text-indigo-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
              Scanning database...
            </div>
            <div id="discover-results"></div>
          </div>
        </div>

        <!-- Manual models panel -->
        <div id="manual-panel">
          <div class="flex items-center justify-end mb-3">
            <button type="button" onclick="addModelBlock()"
                    class="inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-lg transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
              Add Model
            </button>
          </div>

          <div id="models-container" class="space-y-6">
            {% for model in form.models %}
            <div class="model-block border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
              <div class="bg-gray-50 dark:bg-gray-800/80 px-4 py-3 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center gap-3">
                  <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
                  <input type="text" name="model_name[]" value="{{ model.name }}" placeholder="table_name"
                         class="border border-gray-300 rounded-md px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 w-48" />
                  <input type="hidden" name="model_type[]" value="{{ model.type or 'table' }}" />
                </div>
                <div class="flex items-center gap-2">
                  <button type="button" onclick="addFieldToModel(this)"
                          class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 px-2 py-1 rounded hover:bg-indigo-50 transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    Field
                  </button>
                  <button type="button" onclick="this.closest('.model-block').remove()"
                          class="text-gray-400 hover:text-red-500 transition-colors p-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                  </button>
                </div>
              </div>

              <div class="fields-container">
                {% if model.fields %}
                <table class="w-full">
                  <thead class="bg-gray-50/50 dark:bg-gray-800/50">
                    <tr>
                      <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-1/4">Field Name</th>
                      <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-1/4">Type</th>
                      <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-20">Required</th>
                      <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-20">Unique</th>
                      <th class="px-4 py-2 w-10"></th>
                    </tr>
                  </thead>
                  <tbody class="fields-body divide-y divide-gray-100">
                    {% for field in model.fields %}
                    <tr class="field-row hover:bg-gray-50/50 dark:hover:bg-gray-800/40">
                      <td class="px-4 py-2">
                        <input type="hidden" name="field_model[]" value="{{ model.name }}" />
                        <input type="text" name="field_name[]" value="{{ field.name }}" placeholder="column_name"
                               class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
                      </td>
                      <td class="px-4 py-2">
                        <select name="field_type[]" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                          {% for ft in ["text", "integer", "float", "boolean", "timestamp", "date", "uuid", "json", "binary", "array"] %}
                          <option value="{{ ft }}" {% if field.type == ft %}selected{% endif %}>{{ ft }}</option>
                          {% endfor %}
                        </select>
                      </td>
                      <td class="px-4 py-2 text-center">
                        <input type="hidden" name="field_required[]" value="{{ 'true' if field.required else 'false' }}" />
                        <button type="button" onclick="toggleCheckbox(this)"
                                class="w-5 h-5 rounded border {% if field.required %}bg-indigo-600 border-indigo-600{% else %}border-gray-300 bg-white{% endif %} flex items-center justify-center transition-colors mx-auto">
                          {% if field.required %}<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>{% endif %}
                        </button>
                      </td>
                      <td class="px-4 py-2 text-center">
                        <input type="hidden" name="field_unique[]" value="{{ 'true' if field.unique else 'false' }}" />
                        <button type="button" onclick="toggleCheckbox(this)"
                                class="w-5 h-5 rounded border {% if field.unique %}bg-indigo-600 border-indigo-600{% else %}border-gray-300 bg-white{% endif %} flex items-center justify-center transition-colors mx-auto">
                          {% if field.unique %}<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>{% endif %}
                        </button>
                      </td>
                      <td class="px-4 py-2 text-center">
                        <button type="button" onclick="this.closest('.field-row').remove()"
                                class="text-gray-400 hover:text-red-500 transition-colors">
                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
                {% else %}
                <div class="fields-body px-4 py-6 text-center text-sm text-gray-400">
                  No fields yet. Click "+ Field" to add one.
                </div>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          </div>

          {% if not form.models %}
          <div id="models-empty" class="text-center py-8 text-gray-400">
            <svg class="w-10 h-10 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
            <p class="text-sm">No models yet. Add one manually or use Auto-Discover.</p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- ============================================================ -->
    <!-- Step 4: Governance -->
    <!-- ============================================================ -->
    <div class="wizard-step" data-step="4">
      <div class="space-y-6">

        <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-6 space-y-5">
          <div class="flex items-center gap-3 mb-1">
            <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-950/50">
              <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
            </div>
            <div>
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Enforcement</h2>
              <p class="text-sm text-gray-500 dark:text-gray-400">Configure how violations are handled.</p>
            </div>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Team</label>
              <select name="team_id"
                      class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                <option value="">— None —</option>
                {% for t in teams|default([]) %}
                <option value="{{ t.id }}" {% if form.team_id|string == t.id|string %}selected{% endif %}>{{ t.name }}</option>
                {% endfor %}
              </select>
              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Canonical link for compliance and rollups. Manage teams under Settings → Teams.</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Enforcement Mode</label>
              <select name="enforcement_mode" class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                {% for m in ["block", "warn", "log"] %}
                <option value="{{ m }}" {% if form.enforcement_mode == m %}selected{% endif %}>{{ m }}</option>
                {% endfor %}
              </select>
              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">block = fail pipeline, warn = log and continue, log = silent</p>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-6 space-y-4">
          <div class="flex items-center gap-3 mb-1">
            <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-violet-50 dark:bg-violet-950/50">
              <svg class="w-5 h-5 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
            </div>
            <div>
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Dependencies</h2>
              <p class="text-sm text-gray-500 dark:text-gray-400">Map upstream table.column to local table.column for precise impact analysis.</p>
            </div>
          </div>

          <div id="deps-container" class="space-y-3">
            {% for dep in form.depends_on|default([]) %}
            <div class="dep-card rounded-lg border border-violet-200 dark:border-violet-800 bg-violet-50/30 dark:bg-violet-950/20 p-4 space-y-3">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757"/></svg>
                  <span class="text-sm font-medium text-violet-800 dark:text-violet-200">{{ dep.contract }}</span>
                </div>
                <button type="button" onclick="this.closest('.dep-card').remove()" class="text-violet-400 hover:text-rose-500 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
              </div>
              <div class="dep-mappings space-y-2">
                {% for m in dep.mappings|default([]) %}
                <div class="dep-mapping-row flex items-center gap-2">
                  <input type="hidden" name="dep_contract_id[]" value="{{ dep.contract }}" />
                  <input type="text" name="dep_upstream_ref[]" value="{{ m.upstream }}" placeholder="table.column"
                         class="flex-1 border border-gray-300 rounded-lg px-2.5 py-1.5 text-xs font-mono focus:outline-none focus:ring-2 focus:ring-violet-500" />
                  <svg class="w-4 h-4 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
                  <input type="text" name="dep_local_ref[]" value="{{ m.local }}" placeholder="table.column"
                         class="flex-1 border border-gray-300 rounded-lg px-2.5 py-1.5 text-xs font-mono focus:outline-none focus:ring-2 focus:ring-violet-500" />
                  <button type="button" onclick="this.closest('.dep-mapping-row').remove()" class="text-gray-400 hover:text-rose-500">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                  </button>
                </div>
                {% endfor %}
              </div>
              <button type="button" onclick="addDepMappingRow(this.closest('.dep-card'), '{{ dep.contract }}')"
                      class="flex items-center gap-1 text-xs font-medium text-violet-600 hover:text-violet-700">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add mapping
              </button>
            </div>
            {% endfor %}
          </div>

          <div class="flex items-end gap-3">
            <div class="flex-1">
              <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Add upstream contract</label>
              <select id="dep-select"
                      class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                <option value="">-- select contract --</option>
                {% for dc in dep_contracts|default([]) %}
                <option value="{{ dc.id }}">{{ dc.title }} ({{ dc.id }})</option>
                {% endfor %}
              </select>
            </div>
            <button type="button" onclick="addDependency()"
                    class="inline-flex items-center gap-1.5 text-sm font-medium text-violet-600 hover:text-violet-700 bg-violet-50 hover:bg-violet-100 px-3 py-2 rounded-lg transition-colors">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
              Add dependency
            </button>
          </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-6 space-y-5">
          <div class="flex items-center gap-3 mb-1">
            <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-950/50">
              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            </div>
            <div>
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Notifications</h2>
              <p class="text-sm text-gray-500 dark:text-gray-400">Routes for violation alerts—separate from General Info contact fields.</p>
            </div>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alerting profile</label>
              <select name="alerting_profile_id"
                      class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                <option value="">— None —</option>
                {% for p in alerting_profiles|default([]) %}
                <option value="{{ p.id }}" {% if form.alerting_profile_id|string == p.id|string %}selected{% endif %}>{{ p.name }}</option>
                {% endfor %}
              </select>
              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Reusable Slack/email channels; optional YAML overrides on the right.</p>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Optional YAML overrides</label>
              <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Merged into <code class="text-xs">x-sraosha.notify</code> for alert routing only—not <code class="text-xs">info.contact</code>.</p>
              <input type="text" name="notify_slack" value="{{ form.notify_slack }}" placeholder="#data-contracts"
                     class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
              <input type="text" name="notify_email" value="{{ form.notify_email }}" placeholder="team@company.com"
                     class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============================================================ -->
    <!-- Step 5: Review & Create -->
    <!-- ============================================================ -->
    <div class="wizard-step" data-step="5">
      <div class="space-y-6">

        <!-- Summary cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

          <!-- General summary -->
          <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-5">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <span class="flex items-center justify-center w-5 h-5 rounded-full bg-indigo-100 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300 text-xs font-bold">1</span>
                General Info
              </h3>
              <button type="button" onclick="goToStep(1)" class="text-xs text-indigo-600 hover:underline">Edit</button>
            </div>
            <div id="review-general" class="text-sm text-gray-600 dark:text-gray-300 space-y-1"></div>
          </div>

          <!-- Servers summary -->
          <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-5">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <span class="flex items-center justify-center w-5 h-5 rounded-full bg-indigo-100 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300 text-xs font-bold">2</span>
                Data Source
              </h3>
              <button type="button" onclick="goToStep(2)" class="text-xs text-indigo-600 hover:underline">Edit</button>
            </div>
            <div id="review-servers" class="text-sm text-gray-600 dark:text-gray-300 space-y-1"></div>
          </div>

          <!-- Models summary -->
          <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-5">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <span class="flex items-center justify-center w-5 h-5 rounded-full bg-indigo-100 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300 text-xs font-bold">3</span>
                Models & Fields
              </h3>
              <button type="button" onclick="goToStep(3)" class="text-xs text-indigo-600 hover:underline">Edit</button>
            </div>
            <div id="review-models" class="text-sm text-gray-600 dark:text-gray-300 space-y-1"></div>
          </div>

          <!-- Governance summary -->
          <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 p-5">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <span class="flex items-center justify-center w-5 h-5 rounded-full bg-indigo-100 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300 text-xs font-bold">4</span>
                Governance
              </h3>
              <button type="button" onclick="goToStep(4)" class="text-xs text-indigo-600 hover:underline">Edit</button>
            </div>
            <div id="review-governance" class="text-sm text-gray-600 dark:text-gray-300 space-y-1"></div>
          </div>

        </div>

        <!-- YAML Preview -->
        <div class="bg-white rounded-xl border border-gray-200 dark:bg-gray-900 dark:border-gray-700 overflow-hidden">
          <div class="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-2">
              <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-200">YAML Preview</span>
            </div>
            <div id="yaml-validation-result" class="text-xs"></div>
          </div>
          <div class="p-0">
            <textarea id="yaml-editor-textarea" name="raw_yaml" class="hidden">{{ raw_yaml }}</textarea>
            <div id="yaml-editor" class="min-h-[400px]"></div>
          </div>
        </div>
        <p class="text-xs text-gray-400 dark:text-gray-500">You can edit the YAML directly above. When you submit, the YAML content takes precedence over form fields.</p>
      </div>
    </div>

    <!-- ============================================================ -->
    <!-- Navigation Footer -->
    <!-- ============================================================ -->
    <div class="flex items-center justify-between mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <div>
        <button type="button" id="wizard-back-btn" onclick="wizardBack()" style="display:none"
                class="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
          Back
        </button>
        <a href="{% if mode == 'edit' %}/ui/contracts/{{ contract_id }}{% else %}/ui/contracts{% endif %}" id="wizard-cancel-link"
           class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Cancel</a>
      </div>
      <div class="flex items-center gap-3">
        <button type="button" id="wizard-validate-btn" onclick="validateContract()" style="display:none"
                class="inline-flex items-center gap-2 bg-white border border-gray-300 text-gray-700 px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 transition-colors">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          Validate
        </button>
        <button type="button" id="wizard-next-btn" onclick="wizardNext()"
                class="inline-flex items-center gap-2 bg-indigo-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm">
          Next
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </button>
        <button type="submit" id="wizard-submit-btn" style="display:none"
                class="inline-flex items-center gap-2 bg-indigo-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          {% if mode == "create" %}Create Contract{% else %}Save Changes{% endif %}
        </button>
      </div>
    </div>
  </form>

  <!-- Validation popup -->
  <div id="validation-popup" class="hidden fixed bottom-6 right-6 max-w-sm w-full bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg p-4 z-50"></div>
</div>

<script>
/* ================================================================
   Saved connections (from server context)
   ================================================================ */
const SAVED_CONNECTIONS = [
  {% for c in connections|default([]) %}
  { id: "{{ c.id }}", name: {{ c.name|tojson }}, type: "{{ c.server_type }}" },
  {% endfor %}
];

/* ================================================================
   Wizard Controller
   ================================================================ */
const TOTAL_STEPS = 5;
let currentStep = 1;
const isEditMode = {{ 'true' if mode == 'edit' else 'false' }};
let highestVisited = isEditMode ? TOTAL_STEPS : 1;

function goToStep(n) {
  if (n < 1 || n > TOTAL_STEPS) return;
  currentStep = n;
  if (n > highestVisited) highestVisited = n;

  document.querySelectorAll('.wizard-step').forEach(el => el.classList.remove('active'));
  const target = document.querySelector('.wizard-step[data-step="' + n + '"]');
  if (target) target.classList.add('active');

  updateStepper();
  updateNavButtons();

  if (n === 3) populateDiscoverServerSelect();
  if (n === 5) { populateReviewCards(); initYamlPreview(); }

  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function wizardNext() {
  if (currentStep < TOTAL_STEPS) {
    if (!validateStep(currentStep)) return;
    goToStep(currentStep + 1);
  }
}

function wizardBack() {
  if (currentStep > 1) goToStep(currentStep - 1);
}

function wizardClickStep(n) {
  if (n <= highestVisited || isEditMode) {
    goToStep(n);
  }
}

function updateStepper() {
  for (let i = 1; i <= TOTAL_STEPS; i++) {
    const circle = document.querySelector('[data-circle="' + i + '"]');
    const label  = document.querySelector('[data-slabel="' + i + '"]');
    const numEl  = document.querySelector('[data-num="' + i + '"]');
    const item   = document.querySelector('.stepper-item[data-step="' + i + '"]');

    circle.className = 'stepper-circle';
    label.className  = 'stepper-label';

    if (i === currentStep) {
      circle.classList.add('active');
      label.classList.add('active');
      numEl.innerHTML = '' + i;
    } else if (i < currentStep || (isEditMode && i <= highestVisited)) {
      circle.classList.add('completed');
      label.classList.add('completed');
      numEl.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>';
    } else {
      circle.classList.add('upcoming');
      label.classList.add('upcoming');
      numEl.innerHTML = '' + i;
    }

    if (item) {
      if (i <= highestVisited || isEditMode) {
        item.classList.remove('disabled');
      } else {
        item.classList.add('disabled');
      }
    }
  }

  for (let i = 2; i <= TOTAL_STEPS; i++) {
    const line = document.querySelector('[data-line="' + i + '"]');
    if (!line) continue;
    line.className = 'stepper-line flex-1';
    if (i <= currentStep) {
      line.classList.add('completed');
    } else {
      line.classList.add('upcoming');
    }
  }
}

function updateNavButtons() {
  const backBtn    = document.getElementById('wizard-back-btn');
  const cancelLink = document.getElementById('wizard-cancel-link');
  const nextBtn    = document.getElementById('wizard-next-btn');
  const submitBtn  = document.getElementById('wizard-submit-btn');
  const valBtn     = document.getElementById('wizard-validate-btn');

  backBtn.style.display    = currentStep > 1 ? '' : 'none';
  cancelLink.style.display = currentStep === 1 ? '' : 'none';
  nextBtn.style.display    = currentStep < TOTAL_STEPS ? '' : 'none';
  submitBtn.style.display  = currentStep === TOTAL_STEPS ? '' : 'none';
  valBtn.style.display     = currentStep === TOTAL_STEPS ? '' : 'none';
}

/* ── Per-step validation ── */
function validateStep(step) {
  if (step === 1) {
    const cid = document.querySelector('input[name="contract_id"]');
    const title = document.querySelector('input[name="title"]');
    if (!cid.value.trim()) { shakeAndFocus(cid); return false; }
    if (!title.value.trim()) { shakeAndFocus(title); return false; }
  }
  return true;
}

function shakeAndFocus(el) {
  el.focus();
  el.classList.add('ring-2', 'ring-red-400', 'border-red-400');
  el.style.animation = 'wizardShake 0.4s ease';
  setTimeout(() => {
    el.classList.remove('ring-2', 'ring-red-400', 'border-red-400');
    el.style.animation = '';
  }, 1500);
}

/* ================================================================
   Review Cards (Step 5)
   ================================================================ */
function populateReviewCards() {
  const gv = (name) => { const el = document.querySelector('[name="' + name + '"]'); return el ? (el.value || '') : ''; };
  const selectLabel = (name) => {
    const el = document.querySelector('select[name="' + name + '"]');
    if (!el || !el.value) return '';
    const opt = el.selectedOptions[0];
    return opt ? (opt.textContent || '').trim() : '';
  };

  const contactBits = [gv('contact_name'), gv('contact_email')].filter(Boolean);
  document.getElementById('review-general').innerHTML =
    '<p><strong>ID:</strong> ' + esc(gv('contract_id')) + '</p>' +
    '<p><strong>Title:</strong> ' + esc(gv('title')) + '</p>' +
    '<p><strong>Version:</strong> ' + esc(gv('version') || '1.0.0') + '</p>' +
    (gv('owner') ? '<p><strong>Steward:</strong> ' + esc(gv('owner')) + '</p>' : '') +
    (contactBits.length ? '<p><strong>Contact:</strong> ' + esc(contactBits.join(' · ')) + '</p>' : '') +
    (gv('description') ? '<p class="text-xs text-gray-400 mt-1">' + esc(gv('description')).substring(0,120) + '</p>' : '');

  const serverRows = document.querySelectorAll('.server-row');
  let sHtml = '';
  if (serverRows.length === 0) {
    sHtml = '<p class="text-gray-400">No servers defined.</p>';
  } else {
    serverRows.forEach(row => {
      const name = row.querySelector('[name="server_name[]"]')?.value || 'unnamed';
      const type = row.querySelector('[name="server_type[]"]')?.value || '';
      sHtml += '<div class="flex items-center gap-2"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">' + esc(type) + '</span><span>' + esc(name) + '</span></div>';
    });
  }
  document.getElementById('review-servers').innerHTML = sHtml;

  const modelBlocks = document.querySelectorAll('.model-block');
  let mHtml = '';
  if (modelBlocks.length === 0) {
    mHtml = '<p class="text-gray-400">No models defined.</p>';
  } else {
    modelBlocks.forEach(mb => {
      const mname = mb.querySelector('[name="model_name[]"]')?.value || 'unnamed';
      const fieldCount = mb.querySelectorAll('.field-row').length;
      mHtml += '<div class="flex items-center gap-2"><svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7"/></svg><span class="font-mono text-xs">' + esc(mname) + '</span><span class="text-xs text-gray-400">(' + fieldCount + ' fields)</span></div>';
    });
  }
  document.getElementById('review-models').innerHTML = mHtml;

  const emode = gv('enforcement_mode') || 'block';
  const slack = gv('notify_slack');
  const email = gv('notify_email');
  const teamName = selectLabel('team_id');
  const profileName = selectLabel('alerting_profile_id');
  let govHtml = '';
  govHtml += '<p><strong>Team:</strong> ' + (teamName ? esc(teamName) : '<span class="text-gray-400">— none —</span>') + '</p>';
  govHtml += '<p><strong>Enforcement:</strong> ' + esc(emode) + '</p>';
  govHtml += '<p><strong>Alerting profile:</strong> ' + (profileName ? esc(profileName) : '<span class="text-gray-400">— none —</span>') + '</p>';
  if (slack) govHtml += '<p><strong>Notify Slack (override):</strong> ' + esc(slack) + '</p>';
  if (email) govHtml += '<p><strong>Notify email (override):</strong> ' + esc(email) + '</p>';
  document.getElementById('review-governance').innerHTML = govHtml;
}

function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

/* ================================================================
   YAML Preview (Step 5)
   ================================================================ */
let _cmInitialized = false;

function _cmTheme() {
  return document.documentElement.classList.contains('dark') ? 'material-darker' : 'default';
}

function initYamlPreview() {
  buildYamlPreview();
  const textarea = document.getElementById('yaml-editor-textarea');
  if (!_cmInitialized) {
    window._cmEditor = CodeMirror(document.getElementById('yaml-editor'), {
      value: textarea.value,
      mode: 'yaml',
      theme: _cmTheme(),
      lineNumbers: true,
      lineWrapping: true,
      tabSize: 2,
      indentWithTabs: false,
    });
    window._cmEditor.on('change', function(cm) {
      textarea.value = cm.getValue();
    });
    new MutationObserver(function () {
      if (window._cmEditor) {
        window._cmEditor.setOption('theme', _cmTheme());
      }
    }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    _cmInitialized = true;
  } else {
    window._cmEditor.setOption('theme', _cmTheme());
    window._cmEditor.setValue(textarea.value);
  }
  setTimeout(() => window._cmEditor.refresh(), 50);
}

function buildYamlPreview() {
  const gv = (name) => { const el = document.querySelector('[name="' + name + '"]'); return el ? (el.value || '') : ''; };

  let y = 'dataContractSpecification: "' + (gv('spec_version') || '1.1.0') + '"\n';
  y += 'id: ' + (gv('contract_id') || 'untitled') + '\n';
  y += 'info:\n';
  y += '  title: "' + (gv('title') || '') + '"\n';
  y += '  version: "' + (gv('version') || '1.0.0') + '"\n';
  if (gv('description')) y += '  description: "' + gv('description').replace(/"/g, '\\"') + '"\n';
  if (gv('owner')) y += '  owner: ' + JSON.stringify(gv('owner')) + '\n';
  if (gv('contact_name') || gv('contact_email')) {
    y += '  contact:\n';
    if (gv('contact_name')) y += '    name: ' + gv('contact_name') + '\n';
    if (gv('contact_email')) y += '    email: ' + gv('contact_email') + '\n';
  }

  const serverConnByKey = {};
  const serverRows = document.querySelectorAll('.server-row');
  if (serverRows.length > 0) {
    y += 'servers:\n';
    serverRows.forEach(row => {
      const sname = row.querySelector('[name="server_name[]"]')?.value || 'default';
      const stype = row.querySelector('[name="server_type[]"]')?.value || 'postgres';
      const connSel = row.querySelector('[name="server_connection[]"]');
      const cid = (connSel && connSel.value) ? connSel.value.trim() : '';
      if (cid && connSel && connSel.selectedOptions && connSel.selectedOptions[0]) {
        const cn = connSel.selectedOptions[0].getAttribute('data-connection-name') || '';
        if (cn) serverConnByKey[sname] = cn;
      }
      y += '  ' + sname + ':\n';
      y += '    type: ' + stype + '\n';
      const fields = {host:'server_host[]',port:'server_port[]',database:'server_database[]',schema:'server_schema[]',
        account:'server_account[]',warehouse:'server_warehouse[]',role:'server_role[]',catalog:'server_catalog[]',
        httpPath:'server_httppath[]',project:'server_project[]',dataset:'server_dataset[]',location:'server_location[]',path:'server_path[]'};
      for (const [k, n] of Object.entries(fields)) {
        const inp = row.querySelector('[name="' + n + '"]');
        if (inp && inp.value && inp.closest('[data-field]')?.style.display !== 'none') {
          const val = k === 'port' ? inp.value : inp.value;
          y += '    ' + k + ': ' + val + '\n';
        }
      }
    });
  }

  const modelBlocks = document.querySelectorAll('.model-block');
  if (modelBlocks.length > 0) {
    y += 'models:\n';
    modelBlocks.forEach(mb => {
      const mname = mb.querySelector('[name="model_name[]"]')?.value || 'untitled';
      const mtype = mb.querySelector('[name="model_type[]"]')?.value || 'table';
      y += '  ' + mname + ':\n';
      y += '    type: ' + mtype + '\n';
      const fieldRows = mb.querySelectorAll('.field-row');
      if (fieldRows.length > 0) {
        y += '    fields:\n';
        fieldRows.forEach(fr => {
          const fname = fr.querySelector('[name="field_name[]"]')?.value || 'unnamed';
          const ftype = fr.querySelector('[name="field_type[]"]')?.value || 'text';
          const freq  = fr.querySelector('[name="field_required[]"]')?.value === 'true';
          const funiq = fr.querySelector('[name="field_unique[]"]')?.value === 'true';
          y += '      ' + fname + ':\n';
          y += '        type: ' + ftype + '\n';
          if (freq) y += '        required: true\n';
          if (funiq) y += '        unique: true\n';
        });
      }
    });
  }

  const teamIdVal = (gv('team_id') || '').trim();
  const apIdVal = (gv('alerting_profile_id') || '').trim();
  const teamSel = document.querySelector('select[name="team_id"]');
  const teamLabel = (teamSel && teamSel.value && teamSel.selectedOptions[0])
    ? (teamSel.selectedOptions[0].textContent || '').trim() : '';
  const eMode = gv('enforcement_mode');
  const slack = gv('notify_slack');
  const email = gv('notify_email');
  const depCards = document.querySelectorAll('#deps-container .dep-card');
  const depGroups = {};
  depCards.forEach(card => {
    card.querySelectorAll('.dep-mapping-row').forEach(row => {
      const cid = row.querySelector('[name="dep_contract_id[]"]')?.value || '';
      const up = (row.querySelector('[name="dep_upstream_ref[]"]')?.value || '').trim();
      const lo = (row.querySelector('[name="dep_local_ref[]"]')?.value || '').trim();
      if (!cid) return;
      if (!depGroups[cid]) depGroups[cid] = {};
      if (up && lo) depGroups[cid][up] = lo;
    });
  });
  const depEntries = Object.entries(depGroups);
  const hasServerConn = Object.keys(serverConnByKey).length > 0;
  const hasXs = teamIdVal || apIdVal || teamLabel || eMode || slack || email || depEntries.length || hasServerConn;
  if (hasXs) {
    y += 'x-sraosha:\n';
    if (teamIdVal) y += '  team_id: ' + teamIdVal + '\n';
    if (apIdVal) y += '  alerting_profile_id: ' + apIdVal + '\n';
    if (teamLabel) y += '  owner_team: ' + JSON.stringify(teamLabel) + '\n';
    if (eMode) y += '  enforcement_mode: ' + eMode + '\n';
    if (hasServerConn) {
      y += '  server_connections:\n';
      Object.entries(serverConnByKey).forEach(([k, v]) => {
        y += '    ' + k + ': ' + JSON.stringify(v) + '\n';
      });
    }
    if (depEntries.length) {
      y += '  depends_on:\n';
      depEntries.forEach(([cid, fmap]) => {
        y += '    - contract: ' + cid + '\n';
        const pairs = Object.entries(fmap);
        if (pairs.length) {
          y += '      fields:\n';
          pairs.forEach(([up, lo]) => { y += '        "' + up + '": "' + lo + '"\n'; });
        }
      });
    }
    if (slack || email) {
      y += '  notify:\n';
      if (slack) y += '    slack_channel: ' + JSON.stringify(slack) + '\n';
      if (email) y += '    email: ' + JSON.stringify(email) + '\n';
    }
  }

  document.getElementById('yaml-editor-textarea').value = y;
}

/* ================================================================
   Toggle custom checkboxes
   ================================================================ */
function toggleCheckbox(btn) {
  const hidden = btn.previousElementSibling;
  const isOn = hidden.value === 'true';
  hidden.value = isOn ? 'false' : 'true';
  if (isOn) {
    btn.classList.remove('bg-indigo-600', 'border-indigo-600');
    btn.classList.add('bg-white', 'border-gray-300');
    btn.innerHTML = '';
  } else {
    btn.classList.add('bg-indigo-600', 'border-indigo-600');
    btn.classList.remove('bg-white', 'border-gray-300');
    btn.innerHTML = '<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>';
  }
}

/* ================================================================
   Server type -> visible fields mapping
   ================================================================ */
const SERVER_FIELDS = {
  postgres:    ['host','port','database','schema'],
  mysql:       ['host','port','database','schema'],
  redshift:    ['host','port','database','schema'],
  trino:       ['host','port','catalog','schema'],
  bigquery:    ['project','dataset','location'],
  snowflake:   ['account','warehouse','database','schema','role'],
  databricks:  ['host','port','catalog','schema','httpPath'],
  duckdb:      ['path','database','schema'],
  mssql:       ['host','port','database','schema'],
  athena:      ['location','database','schema'],
  clickhouse:  ['host','port','database'],
  oracle:      ['host','port','database'],
  vertica:     ['host','port','database','schema'],
  presto:      ['host','port','catalog','schema'],
  synapse:     ['host','port','database','schema'],
  denodo:      ['host','port','database'],
  dremio:      ['host','port','schema'],
  motherduck:  ['database','schema'],
  db2:         ['host','port','database','schema'],
  spark:       ['host','port','catalog','schema','httpPath'],
  fabric:      ['database'],
  cloudsql:    ['host','port','database','schema'],
  dask:        ['path'],
};
const ALL_FIELDS = ['host','port','database','schema','account','warehouse','role','catalog','httpPath','project','dataset','location','path'];
const PORT_HINTS = {
  postgres:'5432',mysql:'3306',redshift:'5439',trino:'8080',databricks:'443',
  mssql:'1433',clickhouse:'8123',oracle:'1521',vertica:'5433',presto:'8080',
  synapse:'1433',dremio:'9047',db2:'50000',spark:'443',cloudsql:'5432',
};

function updateServerFields(row) {
  const sel = row.querySelector('select[name="server_type[]"]');
  if (!sel) return;
  const t = sel.value;
  const visible = SERVER_FIELDS[t] || ['host','port','database','schema'];
  ALL_FIELDS.forEach(f => {
    const el = row.querySelector('[data-field="' + f + '"]');
    if (!el) return;
    const show = visible.includes(f);
    el.style.display = show ? '' : 'none';
    if (!show) {
      const inp = el.querySelector('input');
      if (inp) inp.value = '';
    }
  });
  const portInput = row.querySelector('[data-field="port"] input');
  if (portInput && !portInput.value) portInput.placeholder = PORT_HINTS[t] || '5432';

  const emptyMsg = document.getElementById('servers-empty');
  if (emptyMsg) emptyMsg.style.display = 'none';
}

/* ── Apply connection to server row ── */
function applyConnection(sel) {
  const row = sel.closest('.server-row');
  const connId = sel.value;
  if (!connId) return;

  fetch('/ui/api/connections/' + connId)
    .then(r => r.json())
    .then(data => {
      const typeSelect = row.querySelector('select[name="server_type[]"]');
      if (typeSelect && data.server_type) {
        typeSelect.value = data.server_type;
        updateServerFields(row);
      }
      const fieldMap = {
        host: 'server_host[]', port: 'server_port[]', database: 'server_database[]',
        schema_name: 'server_schema[]', account: 'server_account[]', warehouse: 'server_warehouse[]',
        role: 'server_role[]', catalog: 'server_catalog[]', http_path: 'server_httppath[]',
        project: 'server_project[]', dataset: 'server_dataset[]', location: 'server_location[]',
        path: 'server_path[]',
      };
      for (const [key, inputName] of Object.entries(fieldMap)) {
        const inp = row.querySelector('input[name="' + inputName + '"]');
        if (inp && data[key] != null) inp.value = data[key];
      }
    });
}

/* ── Add server row ── */
function addServerRow() {
  const emptyMsg = document.getElementById('servers-empty');
  if (emptyMsg) emptyMsg.style.display = 'none';

  const container = document.getElementById('servers-container');
  const types = [
    "postgres","mysql","bigquery","snowflake","redshift","databricks","trino","duckdb",
    "mssql","athena","clickhouse","oracle","vertica","presto","synapse",
    "denodo","dremio","motherduck","db2","spark","fabric","cloudsql","dask",
  ];
  const opts = types.map(t => '<option value="' + t + '">' + t + '</option>').join('');
  let connOptions = '<option value="">-- manual --</option>';
  SAVED_CONNECTIONS.forEach(c => {
    const esc = String(c.name).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
    connOptions += '<option value="' + c.id + '" data-type="' + c.type + '" data-connection-name="' + esc + '">' + c.name + ' (' + c.type + ')</option>';
  });
  const connSelect = '<div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Connection</label>' +
    '<select name="server_connection[]" onchange="applyConnection(this)" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">' +
    connOptions + '</select></div>';
  const fld = (df, lbl, nm, ph) =>
    '<div data-field="' + df + '" style="display:none"><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">' + lbl + '</label>' +
    '<input type="text" name="' + nm + '" placeholder="' + ph + '" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" /></div>';
  const html = `
    <div class="server-row border border-gray-200 rounded-lg p-4 relative bg-gray-50/50">
      <button type="button" onclick="this.closest('.server-row').remove()"
              class="absolute top-3 right-3 text-gray-400 hover:text-red-500 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
      <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Server Name</label>
          <input type="text" name="server_name[]" placeholder="production" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white" /></div>
        <div><label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Type</label>
          <select name="server_type[]" onchange="updateServerFields(this.closest('.server-row'))" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white">${opts}</select></div>
        ${connSelect}
        ${fld('host','Host','server_host[]','db.company.com')}
        ${fld('port','Port','server_port[]','5432')}
        ${fld('database','Database','server_database[]','warehouse')}
        ${fld('schema','Schema','server_schema[]','public')}
        ${fld('account','Account','server_account[]','xy12345.us-east-1')}
        ${fld('warehouse','Warehouse','server_warehouse[]','COMPUTE_WH')}
        ${fld('role','Role','server_role[]','SYSADMIN')}
        ${fld('catalog','Catalog','server_catalog[]','hive')}
        ${fld('httpPath','HTTP Path','server_httppath[]','/sql/1.0/warehouses/abc123')}
        ${fld('project','Project','server_project[]','my-gcp-project')}
        ${fld('dataset','Dataset','server_dataset[]','analytics')}
        ${fld('location','Location','server_location[]','us-east1')}
        ${fld('path','Path','server_path[]','/data/warehouse.duckdb')}
      </div>
    </div>`;
  container.insertAdjacentHTML('beforeend', html);
  updateServerFields(container.querySelector('.server-row:last-child'));
}

/* ================================================================
   Model & Field Helpers
   ================================================================ */
function addModelBlock() {
  const emptyMsg = document.getElementById('models-empty');
  if (emptyMsg) emptyMsg.style.display = 'none';

  const container = document.getElementById('models-container');
  const html = `
    <div class="model-block border border-gray-200 rounded-lg overflow-hidden">
      <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
        <div class="flex items-center gap-3">
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
          <input type="text" name="model_name[]" placeholder="table_name" class="border border-gray-300 rounded-md px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 w-48" />
          <input type="hidden" name="model_type[]" value="table" />
        </div>
        <div class="flex items-center gap-2">
          <button type="button" onclick="addFieldToModel(this)" class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 px-2 py-1 rounded hover:bg-indigo-50 transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Field
          </button>
          <button type="button" onclick="this.closest('.model-block').remove()" class="text-gray-400 hover:text-red-500 transition-colors p-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
          </button>
        </div>
      </div>
      <div class="fields-container">
        <div class="fields-body px-4 py-6 text-center text-sm text-gray-400">No fields yet. Click "+ Field" to add one.</div>
      </div>
    </div>`;
  container.insertAdjacentHTML('beforeend', html);
}

function addFieldToModel(btn) {
  const modelBlock = btn.closest('.model-block');
  const modelNameInput = modelBlock.querySelector('input[name="model_name[]"]');
  const modelName = modelNameInput.value || '';
  const fieldsContainer = modelBlock.querySelector('.fields-container');
  let tbody = fieldsContainer.querySelector('.fields-body');
  const placeholder = fieldsContainer.querySelector('.fields-body:not(tbody)');

  if (placeholder && !placeholder.tagName.match(/TBODY/i)) {
    fieldsContainer.innerHTML = `
      <table class="w-full">
        <thead class="bg-gray-50/50">
          <tr>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase w-1/4">Field Name</th>
            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase w-1/4">Type</th>
            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase w-20">Required</th>
            <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase w-20">Unique</th>
            <th class="px-4 py-2 w-10"></th>
          </tr>
        </thead>
        <tbody class="fields-body divide-y divide-gray-100"></tbody>
      </table>`;
    tbody = fieldsContainer.querySelector('.fields-body');
  }

  const row = `
    <tr class="field-row hover:bg-gray-50/50">
      <td class="px-4 py-2">
        <input type="hidden" name="field_model[]" value="${modelName}" />
        <input type="text" name="field_name[]" placeholder="column_name" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
      </td>
      <td class="px-4 py-2">
        <select name="field_type[]" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
          <option value="text">text</option><option value="integer">integer</option><option value="float">float</option><option value="boolean">boolean</option><option value="timestamp">timestamp</option><option value="date">date</option><option value="uuid">uuid</option><option value="json">json</option><option value="binary">binary</option><option value="array">array</option>
        </select>
      </td>
      <td class="px-4 py-2 text-center">
        <input type="hidden" name="field_required[]" value="false" />
        <button type="button" onclick="toggleCheckbox(this)" class="w-5 h-5 rounded border border-gray-300 bg-white flex items-center justify-center transition-colors mx-auto"></button>
      </td>
      <td class="px-4 py-2 text-center">
        <input type="hidden" name="field_unique[]" value="false" />
        <button type="button" onclick="toggleCheckbox(this)" class="w-5 h-5 rounded border border-gray-300 bg-white flex items-center justify-center transition-colors mx-auto"></button>
      </td>
      <td class="px-4 py-2 text-center">
        <button type="button" onclick="this.closest('.field-row').remove()" class="text-gray-400 hover:text-red-500 transition-colors">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </td>
    </tr>`;
  tbody.insertAdjacentHTML('beforeend', row);
}

/* ── Dependencies ── */
var __depFbc = {};
try { __depFbc = {{ fields_by_contract_json | safe }}; } catch(e) {}

function _depBuildOptions(contractId) {
  const tables = __depFbc[contractId] || {};
  const opts = [];
  for (const [tbl, fields] of Object.entries(tables)) {
    for (const f of fields) opts.push(tbl + '.' + f);
  }
  return opts.sort();
}

function addDepMappingRow(card, contractId) {
  const container = card.querySelector('.dep-mappings');
  const upOpts = _depBuildOptions(contractId);
  let upOptsHtml = '<option value="">table.column</option>';
  upOpts.forEach(o => { upOptsHtml += '<option value="' + esc(o) + '">' + esc(o) + '</option>'; });
  const html =
    '<div class="dep-mapping-row flex items-center gap-2">' +
    '<input type="hidden" name="dep_contract_id[]" value="' + esc(contractId) + '" />' +
    '<select name="dep_upstream_ref[]" class="flex-1 border border-gray-300 rounded-lg px-2.5 py-1.5 text-xs font-mono focus:outline-none focus:ring-2 focus:ring-violet-500">' + upOptsHtml + '</select>' +
    '<svg class="w-4 h-4 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>' +
    '<input type="text" name="dep_local_ref[]" placeholder="table.column" class="flex-1 border border-gray-300 rounded-lg px-2.5 py-1.5 text-xs font-mono focus:outline-none focus:ring-2 focus:ring-violet-500" />' +
    '<button type="button" onclick="this.closest(\'.dep-mapping-row\').remove()" class="text-gray-400 hover:text-rose-500">' +
    '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>';
  container.insertAdjacentHTML('beforeend', html);
}

function addDependency() {
  const sel = document.getElementById('dep-select');
  const val = sel.value;
  if (!val) return;
  const label = sel.options[sel.selectedIndex].text;
  const container = document.getElementById('deps-container');
  const html =
    '<div class="dep-card rounded-lg border border-violet-200 bg-violet-50/30 p-4 space-y-3">' +
    '<div class="flex items-center justify-between">' +
    '<div class="flex items-center gap-2">' +
    '<svg class="w-4 h-4 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757"/></svg>' +
    '<span class="text-sm font-medium text-violet-800">' + esc(label) + '</span>' +
    '</div>' +
    '<button type="button" onclick="this.closest(\'.dep-card\').remove()" class="text-violet-400 hover:text-rose-500 transition-colors">' +
    '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>' +
    '<div class="dep-mappings space-y-2"></div>' +
    '<button type="button" onclick="addDepMappingRow(this.closest(\'.dep-card\'), \'' + esc(val) + '\')" class="flex items-center gap-1 text-xs font-medium text-violet-600 hover:text-violet-700">' +
    '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Add mapping</button></div>';
  container.insertAdjacentHTML('beforeend', html);
  sel.value = '';
}

/* ================================================================
   Auto-Discover (Step 3)
   ================================================================ */
function setModelMode(mode) {
  const manualBtn   = document.getElementById('btn-mode-manual');
  const discoverBtn = document.getElementById('btn-mode-discover');
  const manualPanel = document.getElementById('manual-panel');
  const discoverPanel = document.getElementById('discover-panel');

  if (mode === 'discover') {
    manualBtn.classList.remove('active');
    discoverBtn.classList.add('active');
    manualPanel.style.display = 'none';
    discoverPanel.style.display = '';
    populateDiscoverServerSelect();
  } else {
    discoverBtn.classList.remove('active');
    manualBtn.classList.add('active');
    discoverPanel.style.display = 'none';
    manualPanel.style.display = '';
  }
}

function populateDiscoverServerSelect() {
  const sel = document.getElementById('discover-server-select');
  const current = sel.value;
  const serverRows = document.querySelectorAll('.server-row');
  let html = '<option value="">-- select server --</option>';
  serverRows.forEach((row, i) => {
    const name = row.querySelector('[name="server_name[]"]')?.value || ('Server ' + (i+1));
    const type = row.querySelector('[name="server_type[]"]')?.value || '';
    const connSel = row.querySelector('[name="server_connection[]"]');
    const connId = connSel ? connSel.value : '';
    html += '<option value="' + i + '" data-conn="' + connId + '" data-type="' + type + '">' + esc(name) + ' (' + type + ')</option>';
  });
  sel.innerHTML = html;
  if (current) sel.value = current;
  onDiscoverServerChange();
}

function onDiscoverServerChange() {
  const sel = document.getElementById('discover-server-select');
  const opt = sel.options[sel.selectedIndex];
  const connId = opt ? (opt.dataset.conn || '') : '';
  const credsPanel = document.getElementById('discover-creds-panel');
  const connInfo = document.getElementById('discover-conn-info');
  if (connId) {
    credsPanel.style.display = 'none';
    connInfo.style.display = '';
  } else if (sel.value !== '') {
    credsPanel.style.display = '';
    connInfo.style.display = 'none';
  } else {
    credsPanel.style.display = 'none';
    connInfo.style.display = 'none';
  }
}

function wizardDiscover() {
  const sel = document.getElementById('discover-server-select');
  const idx = sel.value;
  if (idx === '') { alert('Please select a server first.'); return; }

  const serverRow = document.querySelectorAll('.server-row')[parseInt(idx)];
  if (!serverRow) return;

  const connSel = serverRow.querySelector('[name="server_connection[]"]');
  const connId = connSel ? connSel.value : '';
  const serverType = serverRow.querySelector('[name="server_type[]"]')?.value || 'postgres';
  const schema = document.getElementById('discover-schema-input').value || 'public';

  const spinner = document.getElementById('discover-spinner');
  const results = document.getElementById('discover-results');
  spinner.style.display = '';
  results.innerHTML = '';

  const params = new URLSearchParams();
  params.set('server_type', serverType);
  params.set('schema', schema);

  if (connId) {
    params.set('connection_id', connId);
  } else {
    params.set('host', serverRow.querySelector('[name="server_host[]"]')?.value || '');
    params.set('port', serverRow.querySelector('[name="server_port[]"]')?.value || '');
    params.set('database', serverRow.querySelector('[name="server_database[]"]')?.value || '');
    params.set('user', document.getElementById('discover-user-input')?.value || '');
    params.set('password', document.getElementById('discover-password-input')?.value || '');
    params.set('path', serverRow.querySelector('[name="server_path[]"]')?.value || '');
  }

  fetch('/ui/partials/wizard-discover', { method: 'POST', body: params })
    .then(r => r.text())
    .then(html => {
      spinner.style.display = 'none';
      results.innerHTML = html;
    })
    .catch(err => {
      spinner.style.display = 'none';
      results.innerHTML = '<div class="text-sm text-red-600 p-2">Discovery failed: ' + err.message + '</div>';
    });
}

function importDiscoveredTables() {
  const checked = document.querySelectorAll('#discover-results .discover-cb:checked');
  if (checked.length === 0) { alert('Select at least one table.'); return; }

  const emptyMsg = document.getElementById('models-empty');
  if (emptyMsg) emptyMsg.style.display = 'none';

  checked.forEach(cb => {
    const tableName = cb.value;
    const row = cb.closest('tr');
    const colsText = row?.dataset.columns || '';
    const cols = colsText ? JSON.parse(colsText) : [];

    let existing = false;
    document.querySelectorAll('#models-container input[name="model_name[]"]').forEach(inp => {
      if (inp.value === tableName) existing = true;
    });
    if (existing) return;

    addModelBlock();
    const blocks = document.querySelectorAll('#models-container .model-block');
    const block = blocks[blocks.length - 1];
    block.querySelector('input[name="model_name[]"]').value = tableName;

    cols.forEach(col => {
      const addBtn = block.querySelector('button[onclick="addFieldToModel(this)"]');
      if (addBtn) addFieldToModel(addBtn);
      const fieldRows = block.querySelectorAll('.field-row');
      const lastRow = fieldRows[fieldRows.length - 1];
      if (lastRow) {
        lastRow.querySelector('input[name="field_model[]"]').value = tableName;
        lastRow.querySelector('input[name="field_name[]"]').value = col.column_name;
        const typeSelect = lastRow.querySelector('select[name="field_type[]"]');
        if (typeSelect) typeSelect.value = col.mapped_type || 'text';
        if (!col.is_nullable) {
          const reqHidden = lastRow.querySelector('input[name="field_required[]"]');
          const reqBtn = reqHidden?.nextElementSibling;
          if (reqHidden && reqBtn) { reqHidden.value = 'true'; toggleCheckbox(reqBtn); toggleCheckbox(reqBtn); reqHidden.value = 'true'; reqBtn.classList.add('bg-indigo-600','border-indigo-600'); reqBtn.classList.remove('bg-white','border-gray-300'); reqBtn.innerHTML = '<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>'; }
        }
      }
    });
  });

  setModelMode('manual');
}

/* ================================================================
   Inline Validation
   ================================================================ */
function validateContract() {
  const popup = document.getElementById('validation-popup');
  popup.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">Validating...</p>';
  popup.classList.remove('hidden');

  const form = document.getElementById('contract-form');
  const formData = new FormData(form);

  fetch('/ui/partials/validate-contract', { method: 'POST', body: formData })
    .then(r => r.text())
    .then(html => {
      popup.innerHTML = html;
      setTimeout(() => popup.classList.add('hidden'), 5000);
    })
    .catch(() => {
      popup.innerHTML = '<p class="text-sm text-red-600">Validation request failed.</p>';
      setTimeout(() => popup.classList.add('hidden'), 3000);
    });
}

/* ================================================================
   Init
   ================================================================ */
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.server-row').forEach(updateServerFields);

  if (isEditMode) {
    highestVisited = TOTAL_STEPS;
    updateStepper();
  }
  updateNavButtons();
});

/* shake keyframes injected dynamically */
if (!document.getElementById('wizard-shake-style')) {
  const s = document.createElement('style');
  s.id = 'wizard-shake-style';
  s.textContent = '@keyframes wizardShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }';
  document.head.appendChild(s);
}
</script>
{% endblock %}