{% extends "base.html" %}
{% block header %}
  {{ super() }}
{% endblock header %}

{% block content %}
  {% include "partials/navbar.html" %}

  <div class="container mt-4">
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul class=flashes>
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    {% endwith %}

    <form
      method="POST"
      action="{{ url_for('bulk_upload_activities') }}"
      enctype="multipart/form-data"
      class="mt-5"
      >
      <div class="card shadow-sm">
        <div class="card-header bg-light">
          <h5 class="form-title">
            <i class="fa fa-upload mr-2"></i>
            Bulk Upload Activity Mappings
          </h5>
          <hr class="section-divider" />
        </div>

        <div class="card-body">
          <p class="mb-4">
            Upload a .csv, .xlsx, .xls, .xml format file to add multiple activity mappings.
          </p>

          <div class="row align-items-end">
            <div class="col-md-8">
              <div class="form-group">
                <input
                  type="file"
                  class="form-control"
                  name="file"
                  accept=".csv,.xlsx,.xls,.xml"
                  required
                />
              </div>
            </div>

            <div class="col-md-4 text-md-right mt-3 mt-md-0">
              <a
                href="{{ url_for('download_sample_activity_sheet') }}"
                class="btn btn-outline-secondary btn-block"
                download
              >
                <i class="fa fa-download mr-1"></i>
                Download Sample Sheet
              </a>
            </div>
          </div>

          <hr class="my-4" />

          <div class="text-right">
            <button type="submit" class="btn btn-success px-5">
              <i class="fa fa-cloud-upload mr-1"></i>
              Upload & Process
            </button>
          </div>
        </div>
      </div>
      </form>
  </div>

</div>
{% endblock content %}