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

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

<div class="panel">
    <header>
        Step 3 — choose columns &amp; configure merge
        <span class="subtitle">{{ qualified_table }}</span>
        <span style="margin-left:auto"><a href="/wizard/tables?source_connection_id={{ connection.id }}{% for k,v in qvals.items() %}&amp;{{ k }}={{ v }}{% endfor %}&amp;browse=1">&larr; different table</a></span>
    </header>
    <div class="body">
        {% if fetch_error %}
        <pre class="sql" style="color:var(--danger)">{{ fetch_error }}</pre>
        {% endif %}
    </div>
</div>

{% if dest_warn %}
<div class="flash warn">
    Dest table <code>{{ dest_warn.qualified }}</code> already exists on the
    default destination. If you proceed, pipekit will <strong>not</strong> drop
    or recreate it — your picks below (dest names) must match the existing
    columns, or the create will fail. Existing columns:
    <span class="mono">{{ dest_warn.columns|join(', ') }}</span>
</div>
{% endif %}

{% if not fetch_error %}
<form method="post" action="/wizard/create">
    <input type="hidden" name="source_connection_id" value="{{ connection.id }}">
    <input type="hidden" name="table" value="{{ table }}">
    {% for k, v in qvals.items() %}
        <input type="hidden" name="{{ k }}" value="{{ v }}">
    {% endfor %}

    <div class="two-col">
        <div class="panel">
            <header>
                Columns
                <span class="subtitle">{{ columns|length }} total — uncheck to exclude</span>
                <span style="margin-left:auto">
                    <button type="button" class="ghost" onclick="toggleAll(true)">all</button>
                    <button type="button" class="ghost" onclick="toggleAll(false)">none</button>
                </span>
            </header>
            <div class="body tight">
                <table class="grid picker">
                    <thead>
                        <tr>
                            <th class="pick"></th>
                            <th style="width:3em">#</th>
                            <th>source name</th>
                            <th>source type</th>
                            <th style="width:3em">null?</th>
                            <th>dest name</th>
                            <th>dest type</th>
                            <th>description</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for c in columns %}
                        <tr onclick="var cb=document.getElementById('col-{{ loop.index }}'); if(event.target.tagName!=='INPUT') cb.checked=!cb.checked">
                            <td class="pick">
                                <input type="checkbox" id="col-{{ loop.index }}"
                                       class="col-check" name="col" value="{{ c.name }}" checked>
                            </td>
                            <td class="mono">{{ c.position }}</td>
                            <td class="mono">{{ c.name }}</td>
                            <td class="mono" style="color:var(--text-muted)">{{ c.type_raw }}</td>
                            <td class="mono">{{ 'Y' if c.nullable else 'N' }}</td>
                            <td>
                                <input type="text" class="mono"
                                       name="dest_name__{{ c.name }}"
                                       value="{{ c.default_dest_name }}"
                                       style="width:100%;font-size:12px">
                            </td>
                            <td>
                                <input type="text" class="mono"
                                       name="dest_type__{{ c.name }}"
                                       value="{{ c.default_dest_type }}"
                                       style="width:100%;font-size:12px">
                            </td>
                            <td>
                                <input type="text"
                                       name="dest_desc__{{ c.name }}"
                                       value="{{ c.default_description }}"
                                       style="width:100%;font-size:12px">
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <div class="panel">
                <header>Module</header>
                <div class="body">
                    <label class="field">
                        <span>name</span>
                        <input type="text" name="module_name" required
                               value="{{ default_module_name }}">
                        <span class="help">used in the URL and as the default staging table name</span>
                    </label>
                </div>
            </div>

            <div class="panel">
                <header>Destination</header>
                <div class="body">
                    <label class="field">
                        <span>connection</span>
                        <select name="dest_connection_id" required>
                            {% for c in all_connections %}
                            <option value="{{ c.id }}"
                                {% if default_dest_conn_id and c.id == default_dest_conn_id %}selected{% endif %}>
                                {{ c.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </label>
                    <label class="field">
                        <span>dest table</span>
                        <input type="text" name="dest_table" required
                               value="{{ (default_dest_schema + '.' + default_module_name) if default_dest_schema else default_module_name }}">
                        <span class="help">fully-qualified (schema.table) in the destination DB</span>
                    </label>
                    <label class="field">
                        <span>staging table</span>
                        <input type="text" name="staging_table"
                               placeholder="pipekit_staging.{{ default_module_name }}">
                        <span class="help">optional — defaults to pipekit_staging.&lt;name&gt;</span>
                    </label>
                    <label class="field">
                        <span>table description</span>
                        <textarea name="dest_description" rows="2"
                                  style="width:100%">{{ table_description }}</textarea>
                        <span class="help">emitted as COMMENT ON TABLE after CREATE</span>
                    </label>
                </div>
            </div>

            <div class="panel">
                <header>Merge</header>
                <div class="body">
                    <label class="field">
                        <span>strategy</span>
                        <select name="merge_strategy" id="merge_strategy"
                                onchange="document.getElementById('mkf').style.display = this.value==='incremental' ? '' : 'none'">
                            <option value="full">full (truncate + insert)</option>
                            <option value="incremental">incremental (delete by key + insert)</option>
                            <option value="append">append (insert only)</option>
                        </select>
                    </label>
                    <label class="field" id="mkf" style="display:none">
                        <span>merge key</span>
                        <input type="text" name="merge_key" placeholder="e.g. id  or  id,version">
                        <span class="help">column name(s) used for the DELETE predicate</span>
                    </label>
                </div>
            </div>

            <div class="panel">
                <header>Create</header>
                <div class="body" style="display:flex;justify-content:flex-end;gap:0.5rem">
                    <a class="btn ghost" href="/">cancel</a>
                    <button type="submit" class="primary">create module</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    function toggleAll(val) {
        document.querySelectorAll('.col-check').forEach(function (cb) { cb.checked = val; });
    }
</script>
{% endif %}
{% endblock %}