{% extends "base.html" %}

{% block content %}
  <div class="pearing-page-stack pearing-page-shell-reading mx-auto">
    <div class="pearing-repo-workspace">
      {% include "partials/repo_heading.html" %}
      {% set repo_tab = "uploads" %}
      {% include "partials/repo_tabs.html" %}
    </div>

    <div class="card shadow-sm">
      <div class="card-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div class="fw-semibold">Upload files</div>
          <a class="btn btn-sm btn-outline-secondary" href="{{ repo_path }}/uploads">Back to uploads</a>
        </div>

        {% if form.form_error %}
          <div class="alert alert-danger py-2" role="alert">{{ form.form_error }}</div>
        {% endif %}

        <form method="post" action="{{ repo_path }}/uploads/new" enctype="multipart/form-data" class="row g-3" data-upload-paste-form="true" data-upload-batch-form="true">
          <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
          <div class="col-12">
            <label class="form-label" for="upload-file">Files</label>
            <input class="form-control" id="upload-file" name="file" type="file" multiple required>
            <div class="form-text">Up to {{ max_group_members }} files and {{ max_group_size_display }} total; {{ max_upload_size_display }} per file. You can also paste files from your clipboard.</div>
            <div class="form-text mt-1" data-upload-paste-status="true" aria-live="polite"></div>
          </div>
          <div class="col-12 d-none" data-upload-staged-container="true">
            <div class="table-responsive border rounded">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th scope="col">Filename</th>
                    <th scope="col">Type</th>
                    <th scope="col">Size</th>
                    <th scope="col" class="text-end">Action</th>
                  </tr>
                </thead>
                <tbody data-upload-staged-list="true"></tbody>
              </table>
            </div>
          </div>
          <div class="col-12">
            <label class="form-label" for="upload-description">Description</label>
            <textarea class="form-control" id="upload-description" name="description" rows="4">{{ form.description }}</textarea>
            <div class="form-text">Applied to each uploaded file.</div>
          </div>
          <div class="col-12 d-none" data-upload-group-fields="true">
            <div class="card bg-body-tertiary border-0">
              <div class="card-body row g-3">
                <div class="col-12 col-md-5">
                  <label class="form-label" for="upload-group-name">Group name</label>
                  <input class="form-control" id="upload-group-name" name="group_name" value="{{ form.group_name }}" placeholder="Generated from the first filename">
                </div>
                <div class="col-12 col-md-7">
                  <label class="form-label" for="upload-group-description">Group description</label>
                  <textarea class="form-control" id="upload-group-description" name="group_description" rows="2">{{ form.group_description }}</textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            {% with primary_label="Upload files", cancel_label="Cancel", cancel_href=repo_path ~ "/uploads" %}
              {% include "partials/form_actions.html" %}
            {% endwith %}
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>PearingScripts.initUploadPaste();</script>
{% endblock %}