{% extends "base.html" %}
{% load django_bootstrap5 %}
{% block title %}Upload Files{% endblock title %}

{% block main_content %}
  <div class="row justify-content-center">
    <div class="col-lg-6 col-sm-8">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title">Upload Files to BMA</h5>
        </div>
        <div class="card-body license-card">
            <p class="fs-3">Understanding Creative Commons licenses</p>
          <div class="row g-3 justify-content-center my-3">
            <div class="col-lg-4 d-flex align-items-stretch">
              <div class="card">
                <div class="card-body text-center p-4">
                  <i class="fa-brands fa-creative-commons-zero fa-5x mb-3"></i>
                  <h5 class="card-title mb-3">CC0 1.0 Universal</h5>
                  <p class="card-text mb-4 text-secondary">
                  The creator is giving up their copyright and allowing reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.
                  </p>
                </div>
                <div class="card-footer">
                  <a href="https://creativecommons.org/publicdomain/zero/1.0/" class="fw-bold text-decoration-none link-primary" target="_blank">Learn more</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 d-flex align-items-stretch">
              <div class="card">
                <div class="card-body text-center p-4">
                  <i class="fa-brands fa-creative-commons-by fa-5x mb-3"></i>
                  <h5 class="card-title mb-3">Attribution 4.0 International</h5>
                  <p class="card-text mb-4 text-secondary">
                  Requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.
                  </p>
                </div>
                <div class="card-footer">
                  <a href="https://creativecommons.org/licenses/by/4.0/" class="fw-bold text-decoration-none link-primary" target="_blank">Learn more</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 d-flex align-items-stretch">
              <div class="card">
                <div class="card-body text-center p-4">
                  <i class="fa-brands fa-creative-commons-sa fa-5x mb-3"></i>
                  <h5 class="card-title mb-3">Attribution-ShareAlike 4.0 International</h5>
                  <p class="card-text text-secondary mb-1">
                  Requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.
                  If others remix, adapt, or build upon the material, they must license the modified material under identical terms.
                  </p>
                </div>
                <div class="card-footer">
                  <a href="https://creativecommons.org/licenses/by-sa/4.0/" class="fw-bold text-decoration-none link-primary" target="_blank">Learn more</a>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col mt-3">
                <p class="fs-3">Enter File(s) Metadata</p>
                {% csrf_token %}
                {% for field in form %}
                  {% if field.name != "files" %}
                    {% bootstrap_field field %}
                  {% endif %}
                {% endfor %}
            </div>
          </div>
          <div class="row">
            <div class="col mt-3">
                <p class="fs-3">Pick File(s) to Upload</p>
                {% csrf_token %}
                {% for field in form %}
                  {% if field.name == "files" %}
                    {% bootstrap_field field %}
                  {% endif %}
                {% endfor %}
                <small class="text-muted">* Required</small>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col">
              <div id="preview-wrapper" class="row gy-3"></div>
            </div>
          </div>
        </div>
        <div class="card-footer">
            <button id="btnupload" onclick="uploadFiles()" class="btn btn-success" disabled>Upload files</button>
        </div>
      </div>
    </div>
  </div>


  {# the preview template #}
  <template id="preview-template">
    <div class='col-sm-4 preview'>
      <div class='card h-100'>
        <div class='card-body'>
          <h5 class='card-title'></h5>
          <p class='card-text'></p>
        </div>
        <div class='card-footer'>
          <p>
            {# shown before upload #}
            <i class="fas fa-info d-none"></i>
            {# shown during upload #}
            <i class="fas fa-spinner fa-spin d-none"></i>
            {# shown after upload success #}
            <i class="fas fa-check d-none"></i>
            {# shown after upload failure #}
            <i class="fas fa-exclamation-times d-none"></i>
            <span class="message"></span>
          </p>
        </div>
      </div>
    </div>
  </template>

{% endblock main_content %}
