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

{% block body %}
{% if 'environ' in data and data.environ|length > 0 %}
    <form>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <table class="table table-striped table-bordered table-hover" style="table-layout: fixed">
            <thead>
            <tr>
                <th scope="col">Key</th>
                <th scope="col">Value</th>
                <th class="text-right">
                    <button
                            hx-post="{{ url_for('AstroMigration.button_migrate_env', deployment=session.selectedAstroDeployment or 'undefined') }}"
                            hx-swap="innerHTML"
                            hx-target="#tabs"
                            class="btn btn-primary">
                        Migrate
                    </button>
                </th>
            </tr>
            </thead>
            <tbody>
            {% for k, v in data.environ.items() %}
            <tr>
                <td>{{ k }}</td>
                <td style="font-family: monospace;">
                    {{ v }}
                </td>
                <td class="text-right">
                  <div id="checkbox-env-{{k}}"
                       hx-get="{{ url_for('AstroMigration.checkbox_migrate_env', deployment=session.selectedAstroDeployment or 'undefined', key=k) }}"
                       hx-trigger="load delay:100ms"
                       hx-target="#checkbox-env-{{k}}"
                       hx-swap="innerHTML">
                        <input class="form-check-input" disabled type="checkbox"/>
                  </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </form>
{% else %}
<h4>No environment variables found in local instance.</h4>
{% endif %}
{% endblock %}