{% if problem %}
<p class="notification notification-error" data-testid="import-problem">{{ problem }}</p>
{% else %}
<div class="import-progress">
    <progress id="import-progress" data-testid="import-progress" max="{{ identifiers | length }}" value="0"></progress>
    <span id="import-progress-label" class="form-hint" role="status">0 of {{ identifiers | length }} done</span>
</div>
<table class="import-results-table" data-testid="import-results-table">
    <thead><tr><th>Identifier</th><th>Outcome</th><th>Dataset</th></tr></thead>
    {# Every row's request waits its turn on this element, so the repository is
       asked for one record at a time. #}
    <tbody id="import-queue">
        {% for identifier in identifiers %}
        <tr data-testid="import-row" data-status="waiting">
            <td>{{ identifier }}</td>
            <td>
                <form hx-post="{{ base_url }}/import/new/record"
                      hx-trigger="load"
                      hx-target="closest tr"
                      hx-swap="outerHTML"
                      hx-sync="#import-queue:queue all">
                    <input type="hidden" name="key" value="{{ key }}">
                    <input type="hidden" name="value" value="{{ identifier }}">
                    <span class="form-hint">Waiting&hellip;</span>
                </form>
            </td>
            <td></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}