{% extends 'collector/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %} {{ title }} {% endblock title %}
{% block main %}
<style>
  .not-visible{
      display: none;
  }
</style>

<div class="container mt-3">
    <div class="card">
      <div class="card-header">
        <h3>Archive upload:</h3>
      </div>
      <div class="card-body">
        <div class="container">
          <div class="col-lg-6 alert alert-light alert-dismissible fade show" role="alert">
            <strong>Note!</strong> 
            <br>
              Please do not close this page
              until you receive an alert about a successful upload or an error.
            <br>
              Thank you!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        </div>
        <div id="alert" class="container"></div>
        <div class="container">
          {% crispy form %}
        </div>
      </div>
      <div class="card-footer">
          <div
            id="progress"
            upload-url="{% url 'collector_api:archive-list' %}"
            class="progress"
            role="progressbar"
            aria-label="Example 20px high"
            aria-valuenow="25"
            aria-valuemin="0"
            aria-valuemax="100"
            style="height: 20px"
          >
            <div class="progress-bar"></div>
        </div>
      </div>
    </div>
</div>
{% endblock main %}

{% block jquery %}
  <script type="module" src="{% static 'collector/js/jq.upload.progress.js' %}"></script>
{% endblock jquery %}