{# GET /admin/import — crate::pages::import_export::import::ui::ImportPage #}
{% extends "ui/form_page.html" %}

{% block title %}{{ nav.tr("import-title") }}{% endblock %}
{% block eyebrow %}{{ nav.tr("transfer-eyebrow") }}{% endblock %}
{% block heading %}{{ nav.tr("import-title") }}{% endblock %}
{% block lead %}<p>{{ nav.tr("import-lead") }}</p>{% endblock %}

{% block form %}
{#
  One form for the whole preparation. The steps swap the block inside it rather
  than the form itself, so the scope, the table and the CSV the user chose stay
  where they are while they move back and forth.

  Its own `action` is the prepared-CSV download: a file has to come back from a
  real browser submit, so the plain submit button is the one that downloads and
  every other button carries an `hx-post` of its own.
#}
<form id="import-form" method="post" action="/admin/import/prepared.csv"
      hx-target="#import-step" hx-swap="outerHTML" hx-disabled-elt="this">
  {% include "pages/import_export/import/step.html" %}
</form>
{% include "pages/import_export/table_picker.html" %}
{% include "pages/import_export/import/behaviour.html" %}
{#
  A refusal is not a step. Without this the alert answering "Continue" would be
  swapped in place of the step it was refusing, and the user would lose the
  mapping they were being told to fix.
#}
<script>
  document.addEventListener("htmx:beforeSwap", function (event) {
    const form = event.detail.elt.closest && event.detail.elt.closest("#import-form");
    const status = document.getElementById("submission-status");
    if (!form || !status || event.detail.xhr.status < 400) return;
    event.detail.target = status;
    event.detail.swapOverride = "innerHTML";
  });
</script>
{% endblock %}