{#
  A running import — crate::pages::import_export::import::ui::ImportProgress.

  The card carries its own poll trigger, the way admin/ecb's status card does:
  while the import is running each answer is another card with the trigger
  still on it, and the answer that ends the import is the success dialog or
  failure alert instead — which has no trigger, and that is what stops the
  polling.

  It is also a blocking dialog rather than an inline card: an import that is
  actually done answers a stale-looking page if the tab is left alone, and a
  second click on Import is how a duplicate row gets written. Pinning the
  modal over the page for as long as the job runs makes "click it again" not
  an option, and there is deliberately no way to dismiss it early — Escape and
  a backdrop click do nothing here, unlike the dialogs in ui/dialog.html.
#}
<div id="import-progress"
     hx-get="{{ poll_url }}" hx-trigger="every 1s"
     hx-target="#import-progress" hx-swap="outerHTML"
     x-data="{ importProgressOpen: true }">
  <div x-cloak x-show="importProgressOpen" x-trap.inert.noscroll="importProgressOpen"
       class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 p-4 pb-8 backdrop-blur-md sm:items-center lg:p-8"
       role="dialog" aria-modal="true" aria-labelledby="import-progress-heading">
    <div class="flex w-full max-w-lg flex-col overflow-hidden rounded-radius border border-outline bg-surface text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
      {#
        The card sits inside a polite live region: left alone, a screen reader
        would read the whole card out again every second. It silences itself
        instead, and the dialog or alert that replaces it when the import ends
        — which is the part worth hearing — is announced as usual.
      #}
      <div class="import-progress" aria-live="off">
        <h3 id="import-progress-heading">{{ heading }}</h3>
        <div class="progress-line">
          <progress max="100" value="{{ percent }}" aria-label="{{ label }}"></progress>
          <span class="progress-percent">{{ percent }}%</span>
        </div>
        <p class="progress-rows"><strong>{{ rows }}</strong></p>
        <dl class="progress-stats">
          {% for stat in stats %}
          <div>
            <dt>{{ stat.label }}</dt>
            <dd>{{ stat.value }}</dd>
          </div>
          {% endfor %}
        </dl>
        <p class="hint">{{ hint }}</p>
      </div>
    </div>
  </div>
</div>