{% extends "base.html" %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      {% include "partials/repo_heading.html" %}
      {% set repo_tab = "uploads" %}
      {% include "partials/repo_tabs.html" %}
    </div>

    <div class="card shadow-sm">
      <div class="card-header d-flex flex-column gap-3">
        <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-2">
          <span class="fw-semibold">Repo uploads</span>
          <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
            <button
              class="btn btn-sm btn-outline-secondary d-md-none"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#repo-uploads-filter-collapse"
              aria-controls="repo-uploads-filter-collapse"
              aria-expanded="false"
            >Filters</button>
            <div class="collapse d-md-block" id="repo-uploads-filter-collapse">
              <form method="get" action="{{ repo_path }}/uploads" class="d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center gap-2" id="repo-uploads-filter-form">
                <input type="hidden" name="sort" id="repo-uploads-sort-value" value="{{ query.sort }}">
                <div class="d-flex align-items-center gap-2">
                  <button
                    class="btn btn-sm btn-outline-secondary"
                    type="button"
                    id="repo-uploads-search-toggle"
                    aria-expanded="{% if query.search %}true{% else %}false{% endif %}"
                    aria-controls="repo-uploads-search-row"
                  >Search</button>
                </div>
                <div class="d-flex align-items-center gap-2{% if not query.search %} d-none{% endif %}" id="repo-uploads-search-row">
                  <input
                    type="text"
                    class="form-control form-control-sm"
                    id="repo-uploads-search"
                    name="search"
                    value="{% if query.search %}{{ query.search }}{% endif %}"
                    placeholder="Search uploads…"
                  >
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-uploads-sort-field">Sort</label>
                  <div class="input-group input-group-sm">
                    <select class="form-select" id="repo-uploads-sort-field" name="sort_field">
                      <option value="filename" {% if query.sort == "filename" or query.sort == "-filename" %}selected{% endif %}>Filename</option>
                      <option value="created" {% if query.sort == "created" or query.sort == "-created" %}selected{% endif %}>Created</option>
                      <option value="size" {% if query.sort == "size" or query.sort == "-size" %}selected{% endif %}>Size</option>
                    </select>
                    <button
                      class="btn btn-outline-secondary"
                      id="repo-uploads-sort-direction"
                      type="button"
                      data-direction="{% if query.sort == "filename" or query.sort == "created" or query.sort == "size" %}asc{% else %}desc{% endif %}"
                      aria-label="{% if query.sort == "filename" or query.sort == "created" or query.sort == "size" %}Ascending{% else %}Descending{% endif %}"
                    >
                      {% if query.sort == "filename" or query.sort == "created" or query.sort == "size" %}&uarr;{% else %}&darr;{% endif %}
                    </button>
                  </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <label class="small text-muted" for="repo-uploads-content-type">Type</label>
                  <select class="form-select form-select-sm" id="repo-uploads-content-type" name="content_type">
                    <option value="" {% if query.content_type | length == 0 %}selected{% endif %}>All</option>
                    <option value="image" {% if "image" in query.content_type %}selected{% endif %}>Image</option>
                    <option value="video" {% if "video" in query.content_type %}selected{% endif %}>Video</option>
                    <option value="text" {% if "text" in query.content_type %}selected{% endif %}>Text</option>
                    <option value="other" {% if "other" in query.content_type %}selected{% endif %}>Other</option>
                  </select>
                </div>
                <a class="btn btn-sm btn-outline-secondary" href="{{ repo_path }}/uploads">Reset</a>
              </form>
            </div>
            {% if can_manage_uploads %}
              <a class="btn btn-sm btn-primary" href="{{ repo_path }}/uploads/new">Upload file</a>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card-body">
        {% if page.results | length == 0 %}
          <p class="text-muted mb-0">No uploads found.</p>
        {% else %}
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead>
                <tr>
                  <th scope="col">Filename</th>
                  <th scope="col">Description</th>
                  <th scope="col">Type</th>
                  <th scope="col">Size</th>
                  <th scope="col">Uploader</th>
                  <th scope="col">Created</th>
                  <th scope="col" class="text-end">Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for upload in page.results %}
                  <tr>
                    <td>
                      <div class="fw-semibold">
                        <a class="text-decoration-none" href="{{ upload.edit_href }}">{{ upload.filename }}</a>
                      </div>
                      <div class="text-muted small font-monospace">{{ upload.uuid }}</div>
                    </td>
                    <td class="text-muted small">{{ upload.description }}</td>
                    <td class="font-monospace small">{{ upload.content_type }}</td>
                    <td class="small">{{ upload.size_label }}</td>
                    <td>
                      {% with user_link_href = upload.created_by_href, user_link_username = upload.created_by_username, user_link_label = upload.created_by_name, user_link_class = "text-decoration-none" %}
                        {% include "partials/hover_card_user_link.html" %}
                      {% endwith %}
                    </td>
                    {% with time_cell_value = upload.created_at, time_cell_class = "text-muted small" %}
                      {% include "partials/relative_time_cell.html" %}
                    {% endwith %}
                    <td class="text-end">
                      <div class="d-inline-flex flex-wrap justify-content-end gap-2">
                        <a class="btn btn-sm btn-outline-secondary" href="{{ upload.download_href }}">Download</a>
                        {% if upload.can_manage %}
                          <a class="btn btn-sm btn-outline-secondary" href="{{ upload.edit_href }}">Edit</a>
                          {% if upload.delete_href %}
                            <form method="post" action="{{ upload.delete_href }}" class="d-inline" data-confirm-modal="confirm-delete-upload" data-confirm-name="{{ upload.filename }}">
                              <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                              <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
                            </form>
                          {% endif %}
                        {% endif %}
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}
      </div>
      {% with page=page, query=query, per_page_id="repo-uploads-per-page", per_page_form="repo-uploads-filter-form" %}
        {% include "partials/paging_footer.html" %}
      {% endwith %}
    </div>
  </div>
  {% with
    modal_id="confirm-delete-upload",
    modal_title="Delete upload",
    modal_body='Delete <span class="fw-semibold" data-confirm-name></span>?',
    modal_confirm_text="Delete upload",
    modal_desc="This file upload is permanently deleted and cannot be restored."
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      var $searchToggle = $("#repo-uploads-search-toggle");
      var $searchRow = $("#repo-uploads-search-row");
      var $searchInput = $("#repo-uploads-search");
      if ($searchToggle.length && $searchRow.length && $searchInput.length) {
        $searchToggle.on("click", function () {
          $searchRow.toggleClass("d-none");
          var hidden = $searchRow.hasClass("d-none");
          $searchToggle.attr("aria-expanded", hidden ? "false" : "true");
          if (!hidden) $searchInput.trigger("focus");
        });
      }

      var $form = $("#repo-uploads-filter-form");
      var $sortField = $("#repo-uploads-sort-field");
      var $sortValue = $("#repo-uploads-sort-value");
      var $sortDirection = $("#repo-uploads-sort-direction");
      if (!$form.length || !$sortField.length || !$sortValue.length || !$sortDirection.length) return;

      function syncSort() {
        var direction = $sortDirection.attr("data-direction") === "asc" ? "asc" : "desc";
        $sortValue.val(direction === "desc" ? "-" + $sortField.val() : $sortField.val());
        $sortDirection.html(direction === "desc" ? "&darr;" : "&uarr;");
        $sortDirection.attr(
          "aria-label",
          direction === "desc" ? "Descending" : "Ascending"
        );
      }

      $sortField.on("change", function () {
        syncSort();
        $form[0].requestSubmit();
      });
      $sortDirection.on("click", function () {
        $sortDirection.attr("data-direction",
          $sortDirection.attr("data-direction") === "desc" ? "asc" : "desc");
        syncSort();
        $form[0].requestSubmit();
      });
      syncSort();
    })();

    PearingScripts.initAutoSubmitFilters("repo-uploads-filter-form", {
      includeFormAttribute: true
    });
  </script>
{% endblock %}