{# 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.

  Import is the form's default action, including an implicit submit with Enter.
  Download overrides the action on its own button, so only that explicit click
  can return a file.
#}
<form id="import-form" method="post" action="/admin/import"
      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 %}