{#
  The preparation, one step at a time —
  crate::pages::import_export::import::ui::ImportStep.

  Every button that moves between steps swaps this whole block, so each step
  re-states the answers the next one needs as hidden fields. The page keeps no
  server-side draft: what the form carries is the entire state of the
  preparation.
#}
<div id="import-step">
{% match page.step %}

{#- ------------------------------------------------------------------
    Step 1 — where the data is going, and how the source is laid out.
    ------------------------------------------------------------------ -#}
{% when Step::Source %}
  <div class="form-grid">
    <label>{{ nav.tr("import-scope") }}
      <select name="profile_name" data-profile-select required>
        <option value="">{{ nav.tr("import-choose-scope") }}</option>
        {% for profile in page.catalog.profiles %}
          <option value="{{ profile.name }}"{% if page.form.profile_name == profile.name %} selected{% endif %}>{{ profile.label }}</option>
        {% endfor %}
      </select>
    </label>
    <label>{{ nav.tr("import-target-tables") }}
      <select name="table_name" data-table-select required>
        <option value="">{{ nav.tr("import-choose-table") }}</option>
        {%- for profile in page.catalog.profiles %}{% for table in profile.tables %}
        <option value="{{ table }}" data-profile="{{ profile.name }}"{% if page.form.is_table(table) %} selected{% endif %}>{{ table }}</option>
        {%- endfor %}{% endfor %}
      </select>
    </label>

    {#
      Always asked, never guessed. A data row can hold words that read exactly
      like column names, so deciding for the user is how a real row gets eaten
      as a header.
    #}
    <fieldset class="wide source-mode">
      <legend>{{ nav.tr("import-source-mode") }}</legend>
      <label class="check"><input type="radio" name="source_mode" value="header" data-source-mode
             {% if page.form.is_mode("header") %} checked{% endif %}>{{ nav.tr("import-source-header") }}</label>
      <label class="check"><input type="radio" name="source_mode" value="data" data-source-mode
             {% if page.form.is_mode("data") %} checked{% endif %}>{{ nav.tr("import-source-data") }}</label>
      <label class="check"><input type="radio" name="source_mode" value="template" data-source-mode
             {% if page.form.is_mode("template") %} checked{% endif %}>{{ nav.tr("import-source-template") }}</label>
      <p class="hint">{{ nav.tr("import-source-mode-hint") }}</p>
    </fieldset>

    <div class="wide" data-source-fields>
      <div class="form-grid">
        <label class="wide">{{ nav.tr("import-csv-file") }}
          <input type="file" accept=".csv,text/csv"
                 onchange="this.files[0]?.text().then(value =&gt; document.getElementById('csv-data').value = value)">
        </label>
        <label class="wide">{{ nav.tr("import-csv-data") }}<textarea id="csv-data" name="csv_data" rows="12">{{ page.form.csv_data }}</textarea></label>
        <small class="wide">{{ nav.tr("import-csv-format-hint") }}</small>
      </div>
    </div>
  </div>
  <div class="form-actions">
    <a href="/">{{ nav.tr("common-cancel") }}</a>
    <button type="button" hx-post="/admin/import/prepare" hx-include="closest form">{{ nav.tr("import-continue") }}</button>
  </div>

{#- ------------------------------------------------------------------
    Step 2a — one row per source position, pointed wherever the user says.
    ------------------------------------------------------------------ -#}
{% when Step::Mapping with (step) %}
  {% include "pages/import_export/import/carried.html" %}
  <div class="builder-section">
    <h2>{{ nav.tr_args("import-mapping-heading", [("table", step.table_name.clone())]) }}</h2>
    <p class="hint">{{ nav.tr("import-mapping-hint") }}</p>
    <p class="hint">{{ nav.tr_args("import-mapping-rows", [("rows", step.source_rows.to_string())]) }}</p>
    <table class="builder-table mapping-table">
      <thead>
        <tr>
          <th>{{ nav.tr("import-th-position") }}</th>
          {% if step.has_source_names %}<th>{{ nav.tr("import-th-source-name") }}</th>{% endif %}
          <th>{{ nav.tr("import-th-example") }}</th>
          <th>{{ nav.tr("import-th-destination") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for row in step.rows %}
        <tr>
          <td class="mark">{{ row.position }}</td>
          {% if step.has_source_names %}<td class="source-name">{% if let Some(name) = row.source_name %}{{ name }}{% endif %}</td>{% endif %}
          <td class="example">{{ row.example }}</td>
          <td>
            <select name="mapping" data-destination>
              <option value="">{{ nav.tr("import-destination-ignore") }}</option>
              {% for column in step.columns %}
              <option value="{{ column }}"{% if row.targets(column) %} selected{% endif %}>{{ column }}</option>
              {% endfor %}
            </select>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="form-actions">
    <button type="button" class="secondary" hx-post="/admin/import/source" hx-include="closest form">{{ nav.tr("import-back-to-source") }}</button>
    <button type="button" hx-post="/admin/import/preview" hx-include="closest form">{{ nav.tr("import-to-preview") }}</button>
  </div>

{#- ------------------------------------------------------------------
    Step 2b — the template generator: pick the columns, arrange them, take
    away the header.
    ------------------------------------------------------------------ -#}
{% when Step::Template with (step) %}
  {% include "pages/import_export/import/carried.html" %}
  <div class="builder-section">
    <h2>{{ nav.tr_args("import-template-heading", [("table", step.table_name.clone())]) }}</h2>
    <p class="hint">{{ nav.tr("import-template-hint") }}</p>
    <table class="builder-table template-table">
      <thead>
        <tr>
          <th>{{ nav.tr("import-th-order") }}</th>
          <th>{{ nav.tr("import-th-include") }}</th>
          <th>{{ nav.tr("import-th-destination") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for row in step.rows %}
        <tr>
          <td class="order">
            <button type="button" class="toggle move" aria-label="{{ nav.tr_args("import-move-up", [("name", row.name.clone())]) }}"
                    {% if row.first %}disabled{% else %}hx-post="/admin/import/prepare" hx-include="closest form"
                    hx-vals='{"action": "up", "index": "{{ row.index }}"}'{% endif %}>&uarr;</button>
            <button type="button" class="toggle move" aria-label="{{ nav.tr_args("import-move-down", [("name", row.name.clone())]) }}"
                    {% if row.last %}disabled{% else %}hx-post="/admin/import/prepare" hx-include="closest form"
                    hx-vals='{"action": "down", "index": "{{ row.index }}"}'{% endif %}>&darr;</button>
          </td>
          <td>
            {#
              Both fields post in document order, so moving a row moves the
              generated header with it: `template_order` remembers where the
              unticked ones sit, `template_columns` is the header itself.
            #}
            <input type="hidden" name="template_order" value="{{ row.name }}">
            <label class="check"><input type="checkbox" name="template_columns" value="{{ row.name }}"{% if row.chosen %} checked{% endif %}
                   hx-post="/admin/import/prepare" hx-include="closest form"></label>
          </td>
          <td><code>{{ row.name }}</code>{% if row.required %} <span class="hint">{{ nav.tr("import-required-column") }}</span>{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if step.chosen > 0 %}
    <p class="hint">{{ nav.tr("import-template-generated") }}</p>
    <pre class="sql-preview">{{ step.header }}</pre>
    {% else %}
    <p class="hint">{{ nav.tr("import-template-nothing-chosen") }}</p>
    {% endif %}
    <p class="hint">{{ nav.tr("import-template-round-trip") }}</p>
  </div>
  <div class="form-actions">
    <button type="button" class="secondary" hx-post="/admin/import/source" hx-include="closest form">{{ nav.tr("import-back-to-source") }}</button>
    {# A real submit: the answer is a file. #}
    <button type="submit" formaction="/admin/import/template.csv" formnovalidate>{{ nav.tr("import-download-template") }}</button>
  </div>

{#- ------------------------------------------------------------------
    Step 3 — the prepared import, exactly as it will be sent.
    ------------------------------------------------------------------ -#}
{% when Step::Preview with (step) %}
  {% include "pages/import_export/import/carried.html" %}
  {% for value in page.form.mapping %}<input type="hidden" name="mapping" value="{{ value }}">{% endfor %}
  <div class="builder-section">
    <h2>{{ nav.tr_args("import-preview-heading", [("table", step.table_name.clone())]) }}</h2>
    <dl class="postable-grid">
      <div>
        <dt>{{ nav.tr("import-summary-rows") }}</dt>
        <dd><strong>{{ step.source_rows }}</strong></dd>
      </div>
      <div>
        <dt>{{ nav.tr("import-summary-columns-used") }}</dt>
        <dd>{{ step.columns|join(", ") }}</dd>
      </div>
      <div>
        <dt>{{ nav.tr("import-summary-ignored") }}</dt>
        <dd>{% if step.ignored.is_empty() %}<span class="hint">—</span>{% else %}{{ step.ignored|join(", ") }}{% endif %}</dd>
      </div>
      <div>
        <dt>{{ nav.tr("import-summary-omitted") }}</dt>
        <dd>{% if step.omitted.is_empty() %}<span class="hint">—</span>{% else %}{{ step.omitted|join(", ") }}{% endif %}</dd>
      </div>
    </dl>
    {% if !step.missing_required.is_empty() %}
    <p class="error">{{ nav.tr_args("import-summary-missing-required", [("columns", step.missing_required.join(", "))]) }}</p>
    {% endif %}

    <div class="table-wrap">
      <table class="builder-table preview">
        <thead><tr>{% for column in step.columns %}<th>{{ column }}</th>{% endfor %}</tr></thead>
        <tbody>
          {% for row in step.rows %}
          <tr>{% for value in row %}<td>{{ value }}</td>{% endfor %}</tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if step.hidden_rows > 0 %}
    <p class="hint">{{ nav.tr_args("import-preview-more-rows", [("rows", step.hidden_rows.to_string())]) }}</p>
    {% endif %}

    <details class="rename-generated">
      <summary>{{ nav.tr("import-prepared-csv") }}</summary>
      <p class="hint">{{ nav.tr("import-prepared-csv-hint") }}</p>
      <pre class="sql-preview">{{ step.csv }}</pre>
    </details>
  </div>
  <div class="form-actions">
    <button type="button" class="secondary" hx-post="/admin/import/prepare" hx-include="closest form">{{ nav.tr("import-back-to-mapping") }}</button>
    {# A real submit: the answer is a file. #}
    <button type="submit" formnovalidate>{{ nav.tr("import-download-prepared") }}</button>
    <button type="button" hx-post="/admin/import" hx-include="closest form"
            hx-target="#submission-status" hx-swap="innerHTML">{{ nav.tr("import-import-rows") }}</button>
  </div>
{% endmatch %}

  <div id="submission-status" aria-live="polite"></div>
</div>