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

{% if page.table_is_writable() %}
  <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]">
    <section class="builder-section">
      {% 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>
        <div class="form-grid">
          <label>{{ nav.tr("td-table-name") }}
            <input name="table_name_input" value="{{ page.columns.table_name }}"
                   maxlength="38" autocomplete="off">
            <small>{{ nav.tr("td-table-name-hint") }}</small>
          </label>
        </div>
      {% else %}
        <h2>{{ nav.tr("td-add-columns-to") }} <code>{{ page.selection.table }}</code></h2>
        <p class="hint">{{ nav.tr("td-append-hint") }}</p>
      {% endif %}
    </section>
    {% if page.can_adjust_definition() %}{% if let Some(detail) = page.detail %}
      <input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
    {% endif %}{% endif %}
    <div id="column-panel">
      {% include "pages/admin/table_definition/column_panel.html" %}
    </div>
  </form>
{% endif %}