{% extends 'imports/base-site.html' %}

{% import 'macros/table_from_pandas.html' as table_from_pd %}
{% import 'macros/forms.html' as forms %}
{% from 'imports/macros/form.html' import map_columns_form %}


{% block content2 %}

    <h1 class="mt-3 mb-4">Uploaded data</h1>

    <div class="bg-white rounded border p-3 my-3">

        <p>
            Below you see the first five rows of the uploaded data. This is the starting point for the import.
            Please choose a column mapping further below and update to see how these rows will be imported.
        </p>

        {{ table_from_pd.table_from_pandas(table.head()) }}

    </div>

    <h1 class="mt-3 mb-4">Map columns to database</h1>

    <div class="bg-white rounded border p-3 my-3">

        <p>
            Below, you find all fields present in the database. Please select from the dropdown menu
            the column in the uploaded file that should be mapped to the respective field.
        </p>

    {{ map_columns_form(form, '') }}

    </div>


    <h1 class="mt-3 mb-4">Uploaded data</h1>

    <div class="bg-white rounded border p-3 my-3">

        <p>
            Once you have selected the correct column mapping (and saved it by clicking on 'Update
            mapping'), you can try to import the rows of your file to the database.
        </p>

        <a href="{{ url_for("imports.execute", id_=job.id) }}"
           type="button"
           class="btn btn-success">
            Import to database
        </a>

        {% for error in errors %}

            <span class="alert alert-danger">
        {{ error }}
      </span>

        {% endfor %}

    </div>


{% endblock %}