{% extends "base.html" %}

{% block content %}
  <div class="pearing-page-stack">
    <div class="pearing-repo-workspace">
      {% include "partials/repo_heading.html" %}
      {% with repo_tab = "uploads" %}
        {% include "partials/repo_tabs.html" %}
      {% endwith %}
    </div>

    <section class="pearing-panel">
      <header class="pearing-panel-header">
        <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_create_upload %}
              <a class="btn btn-sm btn-primary" href="{{ repo_path }}/uploads/new">Upload files</a>
            {% endif %}
          </div>
        </div>
      </header>
      <div>
        {% if page.results | length == 0 %}
          <p class="pearing-panel-body text-muted mb-0">No uploads found.</p>
        {% else %}
          <div class="pearing-list">
            {% for entry in page.results %}
              {% if entry.is_group %}
                {% set group = entry.group %}
                <article class="pearing-list-row">
                  <div class="d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center justify-content-between gap-2">
                    <button
                      class="btn btn-link text-start text-decoration-none p-0 flex-grow-1"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#{{ group.collapse_id }}"
                      aria-expanded="false"
                      aria-controls="{{ group.collapse_id }}"
                    >
                      <span class="fw-semibold text-body">{{ group.name }}</span>
                      <span class="badge text-bg-secondary ms-2 pearing-badge-compact">{{ group.member_count }} files</span>
                      <span class="text-muted small ms-2">{{ group.size_label }}</span>
                      {% if group.description %}<span class="d-block text-muted small mt-1">{{ group.description }}</span>{% endif %}
                    </button>
                    <div class="d-flex flex-wrap align-items-center gap-2 small">
                      {% with user_link_href = group.created_by_href, user_link_username = group.created_by_username, user_link_label = group.created_by_name, user_link_class = "text-decoration-none" %}
                        {% include "partials/hover_card_user_link.html" %}
                      {% endwith %}
                      <span class="text-muted" title="{{ group.created_at }}">{{ group.created_at | humantime }}</span>
                    </div>
                  </div>
                  <div class="collapse" id="{{ group.collapse_id }}">
                    <div class="table-responsive">
                      <table class="table table-sm align-middle mb-0 pearing-compact-table">
                        <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" class="text-end">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for upload in group.members %}
                            <tr>
                              <td>
                                <a class="fw-semibold text-decoration-none" href="{{ upload.edit_href }}">{{ upload.filename }}</a>
                                <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 text-nowrap">{{ upload.size_label }}</td>
                              <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>
                  </div>
                </article>
              {% else %}
                {% set upload = entry.upload %}
                <article class="pearing-list-row d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center justify-content-between gap-2">
                    <div class="flex-grow-1">
                      <a class="fw-semibold text-decoration-none" href="{{ upload.edit_href }}">{{ upload.filename }}</a>
                      <span class="badge text-bg-light font-monospace ms-2 pearing-badge-compact">{{ upload.content_type }}</span>
                      <span class="text-muted small ms-2">{{ upload.size_label }}</span>
                      <div class="text-muted small">{{ upload.description }}</div>
                      <div class="text-muted small font-monospace">{{ upload.uuid }}</div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center justify-content-lg-end gap-2">
                      {% 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 small" %}
                        {% include "partials/hover_card_user_link.html" %}
                      {% endwith %}
                      <span class="text-muted small" title="{{ upload.created_at }}">{{ upload.created_at | humantime }}</span>
                      <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>
                </article>
              {% endif %}
            {% endfor %}
          </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 %}
    </section>
  </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 %}