{#
  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 the file it comes from.
    ------------------------------------------------------------------ -#}
{% 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>
    <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 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 2 — one row per destination column, asking where its value comes
    from. Read this way round, a destination cannot be filled twice: it
    appears exactly once.
    ------------------------------------------------------------------ -#}
{% 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-destination") }}</th>
          <th>{{ nav.tr("import-th-required") }}</th>
          <th>{{ nav.tr("import-th-source") }}</th>
          <th>{{ nav.tr("import-th-example") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for row in step.rows %}
        <tr>
          <td><code>{{ row.name }}</code></td>
          <td>{% if row.required %}{{ nav.tr("common-yes") }}{% else %}<span class="hint">{{ nav.tr("common-no") }}</span>{% endif %}</td>
          <td>
            {#
              The destination travels as its stable identity, so a rename
              between here and Import moves the mapping with the column
              instead of leaving it pointing at a name.
            #}
            <input type="hidden" name="destination" value="{{ row.key }}">
            <select name="source_position" data-source-select>
              <option value="">{{ nav.tr("import-source-none") }}</option>
              {% for option in step.sources %}
              <option value="{{ option.position }}" data-example="{{ option.example }}"{% if row.takes(option) %} selected{% endif %}>{{ option.label }}</option>
              {% endfor %}
            </select>
          </td>
          <td class="example" data-example-cell>{{ row.example }}</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 3 — the prepared import, exactly as it will be sent.
    ------------------------------------------------------------------ -#}
{% when Step::Preview with (step) %}
  {% include "pages/import_export/import/carried.html" %}
  {#
    The mapping travels with the preview, so Import and Download prepare the
    identical file from the identical answers.
  #}
  {% for key in page.form.destination %}<input type="hidden" name="destination" value="{{ key }}">{% endfor %}
  {% for position in page.form.source_position %}<input type="hidden" name="source_position" value="{{ position }}">{% 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-empty") }}</dt>
        <dd>{% if step.empty.is_empty() %}<span class="hint">—</span>{% else %}{{ step.empty|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>