{% extends "layout.html" %} {% block content %}
<main class="container">
  <section class="row justify-content-center mt-4">
    <form class="col-md-6" action="" method="post" enctype="multipart/form-data">
      {{ form.hidden_tag() }}
      <fieldset class="bg-white rounded shadow border">
        <div class="text-center h3 primary-colour m-2 pb-2 border-bottom">Import a file</div>
        <div class="p-3">
          <section class="form-group">
            {{ form.title.label(class="primary-colour") }}
            {% if form.title.errors %}
                {{ form.title(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.title.errors %}
                    <small>{{ error }}</small>
                  {% endfor %}
                </div>
            {% else %}
                {{ form.title(class="form-control", placeholder="Enter title") }}
            {% endif %}
          </section>
          <section class="form-field">
            {{ form.file.label(class="primary-colour") }}
            {% if form.file.errors %}
                {{ form.file(class="m-2 is-invalid") }}
                <div class="text-danger mb-2">
                  {% for error in form.file.errors %}
                    <span>{{ error }}</span>
                  {% endfor %}
                </div>
            {% else %}
                {{ form.file(class="m-2") }}
            {% endif %}
          </section>
          <section class="d-flex justify-content-between">
            <a class="btn btn-secondary" href="{{ url_for('main.index') }}" title="Go back to the landing page">Go back</a>
            {{ form.submit(class="btn btn-primary") }}
          </section>
        </div>
      </fieldset>
    </form>
  </section>
</main>
{% endblock content %}