{% extends "base.html" %}
{% set section = "modules" %}
{% block title %}New module — write SQL{% endblock %}

{% block content %}
{% include "_wizard_steps.html" %}

<div class="panel">
    <header>
        Step 2 — write the source query
        <span class="subtitle">{{ connection.name }} ({{ driver_kind }})</span>
        <span style="margin-left:auto"><a href="/wizard">&larr; different connection</a></span>
    </header>
    <div class="body">
        {% if fetch_error %}
        <div class="flash err" style="margin-bottom:0.8rem">
            Could not introspect the query's columns:
            <pre class="sql" style="margin-top:0.4rem">{{ fetch_error }}</pre>
        </div>
        {% endif %}

        <form method="post" action="/wizard/sql/columns">
            <input type="hidden" name="source_connection_id" value="{{ connection.id }}">
            <label class="field">
                <span>source query</span>
                <textarea name="source_query" id="source-query" rows="18" required
                          class="mono" style="width:100%"
                          placeholder="SELECT ... FROM ...">{{ source_query }}</textarea>
                <span class="help">
                    Runs verbatim against the source at run time. Use
                    <code>{name}</code> placeholders for watermarks. On
                    <em>introspect</em>, pipekit runs the query fetching ~no rows to
                    discover its result columns.
                </span>
            </label>
            <div style="display:flex;justify-content:flex-end;gap:0.5rem;margin-top:0.8rem">
                <a class="btn ghost" href="/wizard">cancel</a>
                <button type="submit" class="primary">introspect columns &rarr;</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}