{#
  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>{{ nav.tr("import-date-format") }}
      <select name="date_format" required>
        {% for option in page.date_formats %}
        <option value="{{ option.value }}"{% if option.selected %} selected{% endif %}>{{ option.label }}</option>
        {% endfor %}
      </select>
    </label>
    <small>{{ nav.tr("import-date-format-hint") }}</small>
    <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>
  {% 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="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>
    <div class="mapping-summary" data-mapping-summary
         data-mapped-label="{{ nav.tr("import-summary-mapped-short") }}"
         data-attention-label="{{ nav.tr("import-summary-attention-short") }}">
      <span><strong data-mapped-count>{{ step.mapped }}</strong> {{ nav.tr("import-summary-mapped-short") }}</span>
      <span><strong data-attention-count>{{ step.attention }}</strong> {{ nav.tr("import-summary-attention-short") }}</span>
      <span class="hint">{{ nav.tr_args("import-mapping-rows", [("rows", step.source_rows.to_string())]) }}</span>
    </div>

    {#
      Two lists, never zipped: the file's columns on the left as a movable
      palette, the table's columns on the right as fixed destinations. Selecting
      a run of source chips and clicking a destination fills consecutively from
      there, which is how a whole batch moves in one gesture.
    #}
    <section class="mapping-workbench" data-mapping-workbench>
      <div class="mapping-toolbar">
        <button type="button" class="secondary" data-map-in-order>{{ nav.tr("import-map-in-order") }}</button>
        <button type="button" class="secondary" data-clear-all-mappings>{{ nav.tr("import-clear-all-mappings") }}</button>
      </div>

      <div class="mapping-panels">
        <section class="source-palette">
          <div class="palette-heading">
            <h3>{{ nav.tr("import-csv-columns") }}</h3>
            <div class="palette-actions">
              <button type="button" class="secondary" data-select-all-sources>{{ nav.tr("import-select-all-columns") }}</button>
              <button type="button" class="secondary" data-clear-source-selection>{{ nav.tr("import-clear-selection") }}</button>
              <span class="selection-count" data-selection-count></span>
            </div>
          </div>
          <p class="hint">{{ nav.tr("import-csv-columns-hint") }}</p>
          <div class="source-chips">
            {% for source in step.sources %}
            <button type="button" class="source-chip" draggable="true"
                    data-source-chip data-source-position="{{ source.position }}" aria-pressed="false"
                    aria-label="{{ nav.tr_args("import-drag-source", [("column", source.label.clone())]) }}">
              <span class="chip-order" data-chip-order aria-hidden="true"></span>
              <code>{% if source.name.is_empty() %}{{ nav.tr_args("import-source-column", [("position", source.position.to_string())]) }}{% else %}{{ source.name }}{% endif %}</code>
              <small>{{ source.example }}</small>
              <span class="chip-target" data-source-target></span>
            </button>
            {% endfor %}
          </div>
        </section>

        <section class="destination-map">
          <h3>{{ nav.tr("import-table-columns") }}</h3>
          <p class="hint">{{ nav.tr("import-table-columns-hint") }}</p>
          <ol class="destination-rows">
            {% for row in step.rows %}
            <li data-map-target data-destination-name="{{ row.name }}">
              <input type="hidden" name="destination" value="{{ row.key }}">
              <div class="destination-name">
                <code>{{ row.name }}</code>
                {% if row.required %}<span class="tag">{{ nav.tr("import-required-short") }}</span>{% endif %}
                {% if row.verification %}<span class="tag">{{ nav.tr("import-verification-short") }}</span>{% endif %}
              </div>
              <span class="mapping-arrow" aria-hidden="true">←</span>
              <label>
                <span>{{ nav.tr("import-value-from") }}</span>
                <select name="source_position" data-source-select>
                  <option value="">{{ nav.tr("import-destination-unmapped") }}</option>
                  {% for source in step.sources %}
                  <option value="{{ source.position }}" data-example="{{ source.example }}"{% if row.takes(source) %} selected{% endif %}>{{ source.label }}</option>
                  {% endfor %}
                </select>
              </label>
              <span class="mapped-example" data-example-cell>{{ row.example }}</span>
              <button type="button" class="clear-mapping" data-clear-mapping{% if row.chosen.is_empty() %} disabled{% endif %}>{{ nav.tr("import-clear-mapping") }}</button>
            </li>
            {% endfor %}
          </ol>
        </section>
      </div>
    </section>
  </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>
    <button type="submit" hx-post="/admin/import" hx-include="closest form"
            hx-target="#submission-status" hx-swap="innerHTML">{{ nav.tr("import-import-rows") }}</button>
    {# A real submit: the answer is a file, and only this button asks for it. #}
    <button type="submit" class="secondary" formaction="/admin/import/prepared.csv"
            formnovalidate>{{ nav.tr("import-download-prepared") }}</button>
  </div>
{% endmatch %}

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