{# The add-columns page body — crate::pages::admin::table_definition::ui::AddColumnsFragment. #}
{% include "pages/admin/table_definition/feedback.html" %}

{% if page.table_is_writable() %}
  <section class="panel">
    {% if page.can_adjust_definition() %}
      <h2>{{ nav.tr("td-adjust-table-of") }} <code>{{ page.selection.table }}</code></h2>
      <p class="hint">{{ nav.tr("td-adjust-table-hint") }}</p>
    {% else %}
      <h2>{{ nav.tr("td-add-columns-to") }} <code>{{ page.selection.table }}</code></h2>
      <p class="hint">{{ nav.tr("td-append-hint") }}</p>
    {% endif %}
    <form id="column-form"
          hx-post="/admin/tables/columns/add{{ page.selection.query() }}"
          hx-target="#table-panel" hx-swap="innerHTML"
          hx-disabled-elt="button[type=submit]">
      {% if page.can_adjust_definition() %}{% if let Some(detail) = page.detail %}
        <input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
        <h3>{{ nav.tr("td-existing-columns") }}</h3>
        <table class="builder-table">
          <thead><tr><th>{{ nav.tr("td-remove-column") }}</th><th>{{ nav.tr("td-col-name") }}</th><th>{{ nav.tr("td-col-type") }}</th><th>{{ nav.tr("td-col-notes") }}</th></tr></thead>
          <tbody>
            {% for column in detail.columns %}
              <tr>
                <td>
                  {% if column.is_removal_choice() %}
                    <input type="checkbox" name="remove_column_ids" value="{{ column.column_id }}"
                           aria-label="{{ nav.tr_args("td-remove-column-aria", [("column", column.name.clone())]) }}"
                           {% if page.column_is_selected_for_removal(column.column_id) %}checked{% endif %}>
                  {% else %}<span class="hint">—</span>{% endif %}
                </td>
                <td><code>{{ column.name }}</code></td>
                <td>{{ column.field_type }}</td>
                <td>
                  {% if column.generated %}<span class="tag">{{ nav.tr("column-flag-generated") }}</span>{% endif %}
                  {% if column.read_only %}<span class="tag">{{ nav.tr("column-flag-read-only") }}</span>{% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}{% endif %}
      <h3>{{ nav.tr("td-new-columns") }}</h3>
      <div id="column-panel">
        {% include "pages/admin/table_definition/column_panel.html" %}
      </div>
    </form>
  </section>
{% endif %}