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

{% block title %}Import CSV{% endblock %}
{% block eyebrow %}Data transfer{% endblock %}
{% block heading %}Import CSV{% endblock %}
{% block lead %}<p>Choose a browser-local file or paste CSV. Rows are validated against live table structures before gRPC bulk insertion.</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>Profile
      <input name="profile_name" list="import-profiles" value="{{ page.form.profile_name }}" required placeholder="billing">
    </label>
    <label>Target tables<input name="table_names" list="import-tables" value="{{ page.form.table_names }}" required placeholder="invoices, customers"></label>
    <label class="wide">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">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("Could not import CSV", message) %}{% endcall %}{% endif -%}
  </div>
  <div class="form-actions">
    <a href="/">Cancel</a>
    <button type="submit">Import rows</button>
  </div>
</form>
{% endblock %}