{% extends "components/tabs.html" %}

{% block body %}
{% if 'conns' in data and data.conns|length > 0 %}
    <form>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col">Type</th>
                <th scope="col">Id</th>
                <th scope="col">Host</th>
                <th scope="col">Login</th>
                <th scope="col">Schema</th>
                <th scope="col">Port</th>
                <th scope="col">Extra</th>
                <th>
                </th>
            </tr>
            </thead>
            <tbody>
            {% for key, conn in data.conns.items() %}
            <tr>
                <td>{{ conn.conn_type }}</td>
                <td>{{ conn.conn_id }}</td>
                <td>{{ conn.host }}</td>
                <td>{{ conn.login }}</td>
                <td>{{ conn.schema }}</td>
                <td>{{ conn.port }}</td>
                <td style="font-family: monospace; overflow: hidden; text-overflow: ellipsis;">{{ conn.extra }}</td>
                <td class="text-right">
                  <div id="migrate-button-{{conn.conn_id}}"
                       hx-get="{{ url_for('AstroMigration.button_migrate', type='conn', deployment=session.selectedAstroDeployment or 'undefined', target=conn.conn_id) }}"
                       hx-trigger="load delay:100ms"
                       hx-target="#migrate-button-{{conn.conn_id}}"
                       hx-swap="innerHTML">
                      <button class="btn btn-outline-default disabled">Migrate</button>
                  </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </form>
{% else %}
<h4>No connections found in local metadata database.</h4>
{% endif %}
{% endblock %}