{% macro mapping_option(key, name, selected, group, order, unavailable=false) -%}
<option value='{{ key }}'{% if selected == key %} selected{% endif %}{% if unavailable and selected != key %} hidden{% endif %} data-option-label='{{ name }}' data-option-group='{{ group }}' data-option-order='{{ order }}'>{{ name }}</option>
{%- endmacro %}
<form {{ non_login_form_attrs() }} id='import-step-form' class='form import-mapping' data-import-mapping data-import-mode='{{ mode }}' data-source-formats-url='{{ url_for("review_source_formats", key=dataset.key, token=state.token) }}' data-required-keys='{{ required_keys|tojson }}' data-mapping-reason-text='{{ mapping_reason_text }}' method='post' action='{{ url_for("preview_record_import", key=dataset.key, token=state.token) }}' novalidate>
  {% include "pages/datasets/import/mapping_info.html" %}
  <noscript><p class='help-text'>JavaScript is disabled. You can preview the detected choices or select a candidate reading. Use Change format to inspect the controls. Enable JavaScript to change mappings or source types and refresh examples, or correct your source file and upload it again.</p></noscript>
  <p class='visually-hidden' data-format-status role='status' aria-live='polite' aria-atomic='true'></p>
  <p class='visually-hidden' data-format-error-status role='status' aria-live='polite' aria-atomic='true'></p>
  <ul class='mapping-list' role='list'>
  {% for advice in assistance.columns %}{% set index = loop.index0 %}
    <li class='mapping-row'>
      <div class='mapping-source'>
        <strong id='mapping-source-{{ index }}'>{{ advice.header }}</strong>
        {% if advice.samples %}<p class='mapping-examples' id='mapping-examples-{{ index }}'>Examples: {% for sample in advice.samples %}<code>{{ sample }}</code>{% if not loop.last %} · {% endif %}{% endfor %}</p>
        {% if mapping_samples[index] != advice.samples %}<details class='mapping-details'><summary>Full example values</summary><ul>{% for sample in mapping_samples[index] %}<li><code>{{ sample }}</code></li>{% endfor %}</ul></details>{% endif %}
        {% else %}<p class='mapping-examples' id='mapping-examples-{{ index }}'>No non-empty example values.</p>{% endif %}
      </div>
      <span class='mapping-arrow' aria-hidden='true'>→</span>
      <div class='mapping-target'>
        <label class='visually-hidden' for='mapping-{{ index }}'>Target field for {{ advice.header }}</label>
        <select id='mapping-{{ index }}' name='mapping_{{ index }}' data-select='compact' data-noun='fields' aria-describedby='mapping-examples-{{ index }} mapping-choice-{{ index }}{% if mapping_errors.get(index) %} mapping-error-{{ index }}{% endif %}'{% if mapping_errors.get(index) %} aria-invalid='true'{% endif %}>
          <option value=''{% if advice.selected == '' %} selected{% endif %}>— Choose a field —</option>
          <option value='__ignored__'{% if advice.selected is none %} selected{% endif %}>— Do not import —</option>
          {% for candidate in advice.candidates %}{{ mapping_option(candidate.field_key, candidate.field_name, advice.selected, 'suggested', loop.index0, candidate.field_key in assistance.mapping) }}{% endfor %}
          {% for field in fields %}{% if field.key not in advice.candidate_keys %}{{ mapping_option(field.key, field.name, advice.selected, 'available', loop.index0, field.key in assistance.mapping) }}{% endif %}{% endfor %}
        </select>
        <details class='mapping-rationale' data-mapping-tooltip>
          <summary aria-describedby='mapping-rationale-{{ index }}' id='mapping-choice-{{ index }}' data-mapping-choice class='badge mapping-choice {% if mapping_errors.get(index) %}badge-error{% elif advice.selected == "" %}badge-warning{% elif advice.selected is not none %}badge-success{% endif %}'>{% if mapping_errors.get(index) %}Mapping error{% elif advice.selected == '' %}Needs a choice{% elif advice.selected is none %}Do not import{% else %}Mapped{% endif %}</summary>
          <div id='mapping-rationale-{{ index }}' role='tooltip' class='mapping-tooltip'>
            {% if advice.candidates %}
              <strong>Suggestion: {{ advice.candidates[0].field_name }}</strong>
              <p>{{ advice.candidates[0].confidence }} confidence in this automatic suggestion.</p>
              {% for candidate in advice.candidates %}{% if candidate.reason != advice.warning %}<p>{{ candidate.field_name }}: {{ candidate.reason }}.</p>{% endif %}{% endfor %}
            {% else %}<p>No automatic suggestion is available for this source column.</p>{% endif %}
            {% if advice.warning %}<p class='mapping-warning'>{{ advice.warning }}</p>{% endif %}
          </div>
        </details>
        {% if mapping_errors.get(index) %}<p class='error-text mapping-error' id='mapping-error-{{ index }}'>{{ mapping_errors[index] }}</p>{% endif %}
      </div>
      {% set column = format_columns[index] %}{% include 'pages/datasets/import/source_format.html' %}
    </li>
  {% endfor %}
  </ul>
  <input type='hidden' name='csrf_token' value='{{ current_csrf }}'>
</form>