parcel/templates/uploads/page.html

{% for upload in uploads %}
<div
  id="upload-row-{{ upload.id }}"
  class="uploads-table-row"
  data-page="{{ page }}"
  data-order="{{ query.order }}"
  data-asc="{{ query.asc }}">
    <div class="text-center">
      <parcel-grouped-checkbox
        name="selected"
        group="uploads"
        value="{{ upload.id }}">
      </parcel-grouped-checkbox>
    </div>

    <div class="flex flex-row gap-1">
      {% set upload_url = "/uploads/" + (upload.slug | urlencode) %}
      {% if upload.custom_slug is string %}
        {% set upload_url = "/uploads/" + (auth.username | urlencode) + "/" + (upload.custom_slug | urlencode) %}
      {% endif %}
      <a class="truncate" href="{{ upload_url}}">{{ upload.filename }}</a>
      <parcel-clipboard url="true" value="{{ upload_url }}"></parcel-clipboard>
    </div>

    <div class="text-right text-nowrap">{{ upload.size | filesizeformat }}</div>

    <div class="text-right text-nowrap">{{ upload.downloads }}</div>

    <div class="text-right text-nowrap {% if upload.remaining is number and upload.remaining == 0 %}text-danger{% endif %}">
      {% if upload.limit is number %}
        {% if upload.remaining is number and upload.remaining < upload.limit %}
          <a
            href="#"
            title="Reset remaining downloads to {{ upload.limit }}"
            hx-post="/uploads/{{ upload.id }}/reset"
            hx-trigger="click"
            hx-swap="none"
            hx-confirm="Are you sure you want to reset the remaining downloads for this upload?">
            <span class="icon-rotate-ccw"></span>
          </a>
        {% endif %}
        {{ upload.remaining | default(value = upload.limit) }} / {{ upload.limit }}
      {% else -%}
        &#8734;
      {%- endif %}
    </div>

    <div class="text-nowrap {% if upload.expiry_date and upload.expiry_date is past %}text-danger{% endif %}">
      {% if upload.expiry_date %}
        <span class="hidden xl:block">
          <parcel-date value="{{ upload.expiry_date | date }}">
            {{ upload.expiry_date | date }}
          </parcel-date>
          ({{ upload.expiry_date | datetime_offset }})
        </span>
        <span class="block xl:hidden">
          {{ upload.expiry_date | datetime_offset }}
        </span>
      {% endif %}
    </div>

    <div class="text-center text-nowrap {% if upload.public %}text-danger{% endif %}">
      {% if upload.public %}
        Yes
      {% else %}
        No
      {% endif %}
    </div>

    <div class="text-left text-nowrap">
      <parcel-datetime value="{{ upload.uploaded_at | datetime }}">
        {{ upload.uploaded_at | datetime }}
      </parcel-datetime>
    </div>

    <div>
      <parcel-dropdown>
        <div class="flex flex-col my-2 dark:text-neutral-100">
          <a
            href="/uploads/{{ upload.slug }}/download"
            class="block no-color hover:bg-gray-100 dark:hover:bg-gray-600 px-4 py-2"
            title="Download {{ upload.filename }}">
            <span class="icon-download"></span>
            Download file
          </a>
          <a
            href="#"
            class="block no-color hover:bg-gray-100 dark:hover:bg-gray-600 px-4 py-2"
            title="Edit upload settings"
            hx-get="/uploads/{{ upload.id }}/edit"
            hx-trigger="click"
            hx-target="body"
            hx-swap="beforeend">
            <span class="icon-pencil"></span>
            Edit upload &hellip;
          </a>
          {% set target = ("/uploads/list/" + (page | safe) + "?order=" + query.order + "&asc=" + (query.asc | safe)) | urlencode %}
          <a
            href="#"
            class="block no-color hover:bg-gray-100 dark:hover:bg-gray-600 px-4 py-2"
            title="Share upload link"
            hx-get="/uploads/{{ upload.id }}/share"
            hx-trigger="click"
            hx-target="body"
            hx-swap="beforeend">
            <span class="icon-share"></span>
            Share link &hellip;
          </a>
          <a
            href="#"
            class="block no-color hover:bg-gray-100 dark:hover:bg-gray-600 px-4 py-2"
            hx-post="/uploads/{{ upload.id }}/public?public={{ not upload.public }}"
            hx-trigger="click"
            hx-swap="none"
            {% if upload.public %}
              title="Deny public access to this upload"
            {% else %}
              hx-confirm="Are you sure you want to allow public access to this upload?"
              title="Allow public access to this upload"
            {% endif %}>
            {% if upload.public %}
              <span class="icon-eye-off"></span>
              Make private
            {% else %}
              <span class="icon-eye"></span>
              Make public
            {% endif %}
          </a>
          {% if upload.limit is number and upload.remaining is number and upload.remaining < upload.limit %}
            <a
              href="#"
              class="block no-color hover:bg-gray-100 dark:hover:bg-gray-600 px-4 py-2"
              title="Reset remaining downloads to {{ upload.limit }}"
              hx-post="/uploads/{{ upload.id }}/reset"
              hx-trigger="click"
              hx-swap="none"
              hx-confirm="Are you sure you want to reset the remaining downloads for this upload?">
              <span class="icon-rotate-ccw"></span>
              Reset remaining
            </a>
          {% endif %}
          <a
            href="#"
            class="block no-color hover:bg-gray-100 dark:hover:bg-gray-600 px-4 py-2"
            title="Delete upload"
            hx-delete="/uploads/{{ upload.id }}"
            hx-trigger="click"
            hx-target="closest .uploads-table-row"
            hx-swap="outerHTML"
            hx-confirm="Are you sure you want to delete this upload?">
            <span class="icon-trash-2"></span>
            Delete upload
          </a>
        </div>
      </parcel-dropdown>
    </div>
  </div>
{% endfor %}
{% if page < last_page %}
  <div
    class="uploads-table-sentinel"
    hx-trigger="revealed"
    hx-get="/uploads/list/{{ page + 1 }}?order={{ query.order }}&asc={{ query.asc }}"
    hx-target="this"
    hx-swap="outerHTML">
    Loading &hellip;
  </div>
{% endif %}