{#
  The form's fields, on their own so that "Normalize headers" can hand them
  back with the rewritten CSV in the textarea — see
  crate::pages::import_export::import::ui::ImportFields. `changed` is `None`
  when the page first renders and `Some` once a rewrite has run.
#}
<div id="import-fields">
  <div class="form-grid">
    <label>{{ nav.tr("import-scope") }}
      <select name="profile_name" data-profile-select required>
        <option value="">{{ nav.tr("import-choose-scope") }}</option>
        {% for profile in page.catalog.profiles %}
          <option value="{{ profile.name }}"{% if page.form.profile_name == profile.name %} selected{% endif %}>{{ profile.label }}</option>
        {% endfor %}
      </select>
    </label>
    <label>{{ nav.tr("import-target-tables") }}
      <select name="table_names" data-table-select required>
        <option value="">{{ nav.tr("import-choose-table") }}</option>
        {%- for profile in page.catalog.profiles %}{% for table in profile.tables %}
        <option value="{{ table }}" data-profile="{{ profile.name }}"{% if page.form.table_names.contains(table) %} selected{% endif %}>{{ table }}</option>
        {%- endfor %}{% endfor %}
      </select>
    </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>
  <label class="check">
    <input type="checkbox" name="import_system_columns" value="true"{% if page.form.import_system_columns() %} checked{% endif %}>
    {{ nav.tr("import-system-columns") }}
  </label>
  <small>{{ nav.tr("import-system-columns-hint") }}</small>
  {%- if let Some(changed) = changed %}
  <p class="hint" role="status">{% if changed %}{{ nav.tr("import-normalized-message") }}{% else %}{{ nav.tr("import-normalized-unchanged") }}{% endif %}</p>
  {%- endif %}
</div>