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

{% 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 %}
<form hx-post="/admin/import" hx-target="#submission-status" hx-swap="innerHTML"
      hx-disabled-elt="button[type=submit]">
  <div class="form-grid">
    <label>{{ nav.tr("import-profile") }}
      <input name="profile_name" list="import-profiles" value="{{ page.form.profile_name }}" required placeholder="billing">
    </label>
    <label>{{ nav.tr("import-target-tables") }}<input name="table_names" list="import-tables" value="{{ page.form.table_names }}" required placeholder="invoices, customers"></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="14" required>{{ page.form.csv_data }}</textarea></label>
  </div>
  <datalist id="import-profiles">
    {% for profile in page.catalog.profiles %}<option value="{{ profile.name }}"></option>{% endfor %}
  </datalist>
  <datalist id="import-tables">
    {%- for profile in page.catalog.profiles %}{% for table in profile.tables %}<option value="{{ table }}"></option>{% endfor %}{% endfor -%}
  </datalist>
  <div id="submission-status" aria-live="polite">
    {%- if let Some(message) = page.error %}{% call alert::error(nav.locale, nav.tr("import-error-title"), message) %}{% endcall %}{% endif -%}
  </div>
  <div class="form-actions">
    <a href="/">{{ nav.tr("common-cancel") }}</a>
    <button type="submit">{{ nav.tr("import-import-rows") }}</button>
  </div>
</form>
{% endblock %}