{# The column-presentation page body — crate::pages::admin::table_definition::ui::PresentationFragment. #}
{% include "pages/admin/table_definition/feedback.html" %}

{% if page.table_is_writable() %}
  {% if let Some(detail) = page.detail %}
    {# One form per column, each carrying its own column id: an alias is never
       posted apart from the column it was typed into. #}
    <section class="panel">
      <h2>{{ nav.tr("td-rename-column") }}</h2>
      <p class="hint">{{ nav.tr("td-rename-hint") }}</p>
      {% for column in detail.columns %}
        {% if column.renameable %}
          <form hx-post="/admin/tables/presentation/alias"
                hx-target="#table-panel" hx-swap="innerHTML">
            <input type="hidden" name="profile" value="{{ page.selection.profile }}">
            <input type="hidden" name="table" value="{{ page.selection.table }}">
            <input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
            <input type="hidden" name="column_id" value="{{ column.column_id }}">
            <div class="form-grid">
              <label>{{ nav.tr("td-column-label") }}
                <input name="alias" value="{{ column.name }}">
              </label>
              <div class="form-actions">
                <button type="submit">{{ nav.tr("td-rename-button") }}</button>
              </div>
            </div>
          </form>
        {% else %}
          <p class="hint"><code>{{ column.name }}</code> — {{ nav.tr("td-alias-locked") }}</p>
        {% endif %}
      {% endfor %}
    </section>

    {# The order forms carry no alias at all, so moving a column cannot rename
       one. The names below are labels, not inputs. #}
    <section class="panel">
      <h2>{{ nav.tr("td-order-heading") }}</h2>
      <p class="hint">{{ nav.tr("td-order-hint") }}</p>
      <ol class="column-order">
        {% for column in detail.columns %}
          <li>
            <code>{{ column.name }}</code>
            <form hx-post="/admin/tables/presentation/order"
                  hx-target="#table-panel" hx-swap="innerHTML">
              <input type="hidden" name="profile" value="{{ page.selection.profile }}">
              <input type="hidden" name="table" value="{{ page.selection.table }}">
              <input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
              <input type="hidden" name="column_id" value="{{ column.column_id }}">
              <button type="submit" name="direction" value="up" {% if loop.first %}disabled{% endif %}>↑</button>
              <button type="submit" name="direction" value="down" {% if loop.last %}disabled{% endif %}>↓</button>
            </form>
          </li>
        {% endfor %}
      </ol>
    </section>
  {% endif %}
{% endif %}

{% if let Some(detail) = page.detail %}
  <section class="panel">
    <h2>{{ nav.tr("td-columns-now") }} <span class="count">{{ detail.columns.len() }}</span></h2>
    <table class="builder-table">
      <thead><tr><th>{{ nav.tr("td-col-column") }}</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><code>{{ column.name }}</code></td>
            <td>{{ column.field_type }}{% if !column.sql_type.is_empty() %} <small class="hint">{{ column.sql_type }}</small>{% endif %}</td>
            <td>
              {%- for flag in column.flags(nav.locale) %}<span class="tag">{{ flag }}</span>{% endfor -%}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    {% if !detail.scripts.is_empty() %}
      <h3 class="panel-subhead">{{ nav.tr("td-scripts") }}</h3>
      <table class="builder-table">
        <thead><tr><th>{{ nav.tr("td-col-target-column") }}</th><th>{{ nav.tr("td-col-type") }}</th><th>{{ nav.tr("td-col-description") }}</th></tr></thead>
        <tbody>
          {% for script in detail.scripts %}
            <tr>
              <td><code>{{ script.target_column }}</code></td>
              <td>{{ script.target_column_type }}</td>
              <td>
                {{ script.description }}
                <details><summary>{{ nav.tr("td-source") }}</summary><pre class="sql-preview">{{ script.script }}</pre></details>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </section>
{% endif %}