{% extends basetpl %}
{% load i18n %}
{% block inner %}
    <p>{% blocktrans trimmed %}
        We've been unable to automatically determine how the columns in your file are aligned. Please help us
        by selecting which column contain what kind of data.
    {% endblocktrans %}</p>
    <form method="post" action="">
        {% csrf_token %}
        <button class="btn btn-primary pull-right flip helper-space-below" type="submit">
            <span class="icon icon-upload"></span> {% trans "Continue" %}
        </button>
        <div class="flipped-scroll-wrapper clearfix">
            <table class="table table-condensed flipped-scroll-inner">
                <thead>
                <tr>
                    <th>{% trans "Date" %}</th>
                    {% for col in rows.0 %}
                        <th>
                            <input type="radio" name="date" value="{{ forloop.counter0 }}"/>
                        </th>
                    {% endfor %}
                </tr>
                <tr>
                    <th>{% trans "Amount" %}</th>
                    {% for col in rows.0 %}
                        <th>
                            <input type="radio" name="amount" value="{{ forloop.counter0 }}" required="required"/>
                        </th>
                    {% endfor %}
                </tr>
                <tr>
                    <th>{% trans "Reference" %}</th>
                    {% for col in rows.0 %}
                        <th>
                            <input type="checkbox" name="reference" value="{{ forloop.counter0 }}"/>
                        </th>
                    {% endfor %}
                </tr>
                <tr>
                    <th>{% trans "Payer" %}</th>
                    {% for col in rows.0 %}
                        <th>
                            <input type="checkbox" name="payer" value="{{ forloop.counter0 }}"/>
                        </th>
                    {% endfor %}
                </tr>
                <tr>
                    <th>
                        {% trans "IBAN" %}
                        <label for="id_iban_clear">
                            <span class="btn btn-default btn-sm fa fa-close"></span>
                        </label>
                        <span class="sr-only">
                            <input id="id_iban_clear" type="radio" name="iban">
                        </span>
                    </th>
                    {% for col in rows.0 %}
                        <th>
                            <input type="radio" name="iban" value="{{ forloop.counter0 }}"/>
                        </th>
                    {% endfor %}
                </tr>
                <tr>
                    <th>
                        {% trans "BIC" %}
                        <label for="id_bic_clear">
                            <span class="btn btn-default btn-sm fa fa-close"></span>
                        </label>
                        <span class="sr-only">
                            <input id="id_bic_clear" type="radio" name="bic">
                        </span>
                    </th>
                    {% for col in rows.0 %}
                        <th>
                            <input type="radio" name="bic" value="{{ forloop.counter0 }}"/>
                        </th>
                    {% endfor %}
                </tr>
                </thead>
                <tbody>
                {% for row in rows|slice:":100" %}
                    {% with forloop.counter0 as rowid %}
                        <tr>
                            <td></td>
                            {% for col in row %}
                                <td>{{ col }}</td>
                            {% endfor %}
                        </tr>
                    {% endwith %}
                {% endfor %}
                {% if rows|length > 100 %}
                    <tr>
                        <td colspan="{{ rows.0|length|add:1 }}" class="text-center">
                            <em>{% trans "More data was uploaded but is not shown here. It will still be processed" %}</em>
                        </td>
                    </tr>
                {% endif %}
                </tbody>
            </table>
        </div>
        <input type="hidden" name="cols" value="{{ rows.0|length }}"/>
        <input type="hidden" name="rows" value="{{ rows|length }}"/>
        <textarea class="helper-display-none" name="data">
            {{ json|escape }}
        </textarea>
    </form>
{% endblock %}
