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

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

<div class="panel">
    <header>
        Step 1 — pick a source connection
        <span class="subtitle">the database we'll copy data from</span>
    </header>
    <div class="body tight">
        {% if connections %}
        <form method="get" action="/wizard/tables">
        <table class="grid picker">
            <thead>
                <tr>
                    <th class="pick"></th>
                    <th>name</th>
                    <th>driver</th>
                    <th>jdbc_url</th>
                </tr>
            </thead>
            <tbody>
            {% for c in connections %}
                <tr onclick="document.getElementById('conn-{{ c.id }}').checked=true">
                    <td class="pick">
                        <input type="radio" id="conn-{{ c.id }}" name="source_connection_id"
                               value="{{ c.id }}" {% if loop.first %}checked{% endif %}>
                    </td>
                    <td>{{ c.name }}</td>
                    <td class="mono">{{ c.driver_kind }}</td>
                    <td class="mono" style="color:var(--text-muted)">{{ c.jdbc_url }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="body" style="display:flex;justify-content:flex-end;gap:0.5rem;align-items:center">
            <a class="btn ghost" href="/">cancel</a>
            <button type="submit" class="btn" formaction="/wizard/sql">write SQL &rarr;</button>
            <button type="submit" class="primary" formaction="/wizard/tables">browse a table &rarr;</button>
        </div>
        <p class="help" style="text-align:right;margin:0 0 0.6rem">
            <strong>browse a table</strong> picks one table and its columns ·
            <strong>write SQL</strong> starts from an arbitrary query
        </p>
        </form>
        {% else %}
        <div class="empty">
            No connections yet. <a href="/connections">Add one</a> to begin.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}