parcel/templates/uploads/view.html

{% extends "base.html" %}

{% block title %}{{ upload.filename }}{% endblock %}

{% block content %}
  <div id="upload-view-container" class="grow flex flex-col justify-center items-center p-4 md:p-0">
    <form
      {% if not owner and can_download and has_password %}
        method="POST"
        action="/uploads/{{ upload.slug }}/download"
      {% endif %}
      class="flex flex-col gap-2 border rounded-md shadow-md border-slate-400 dark:border-gray-700
      dark:bg-gray-800 p-6 sm:p-8 w-full md:w-[40rem] lg:w-[48rem] aspect-[16/9]">

      <div class="flex flex-row items-center gap-2 mb-auto">
        <div class="text-8xl text-slate-400 hidden md:block">
          <span class="icon-download group-hover:text-blue-600 dark:group-hover:text-blue-500"></span>
        </div>
        <div>
          <h1 class="heading group-hover:text-blue-600 dark:group-hover:text-blue-500">
            {{ upload.filename }}
            <span class="text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400">
              ({{ upload.size | filesizeformat }})
            </span>
          </h1>

          <div>
            Uploaded {{ upload.uploaded_at | datetime_offset }}
            by {{ uploader.name }}
            {% if owner %}
              (your upload)
            {% endif %}
          </div>

          {% if owner and upload.public %}
            <div class="text-danger">
              Publicly accessible
            </div>
            <div>
                Downloaded {{ upload.downloads }} time{% if upload.downloads != 1 %}s{% endif %}
                {% if upload.limit is number %}
                  <span class="{% if upload.remaining == 0 %}text-danger{% else %}text-success{% endif %}">
                    ({{ upload.remaining }}/{{ upload.limit }} remaining)
                  </span>
                {% endif %}
            </div>
          {% endif %}

          {% if not owner and upload.remaining == 0 %}
            <div class="text-danger">
              <span class="icon-triangle-alert"></span>
              This upload has reached its download limit
            </div>
          {% endif %}

          {% if upload.expiry_date %}
            <div class="{% if expired %}text-danger{% else %}text-success{% endif %}">
              Upload expires {{ upload.expiry_date | date_offset }}
            </div>
          {% endif %}
        </div>
      </div>

      {% if error %}
        <div class="text-danger">
          <span class="icon-triangle-alert"></span>
          {{ error }}
        </div>
      {% endif %}

      {% if not owner and can_download and has_password %}
        <div>
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <label for="password" class="mb-2 mt-0">A password is required to download this file</label>
          <input
          type="password"
          class="field"
          id="password"
          name="password"
          placeholder="Password to download this file"
          required>
        </div>
      {% endif %}

      <div class="buttons end mt-2">
        {% if owner %}
          <button
            type="button"
            class="button hollow"
            title="Edit upload settings"
            hx-get="/uploads/{{ upload.id }}/edit?hx_target=%23upload-view-container&ult_dest=/uploads/{{ upload.slug | urlencode }}"
            hx-trigger="click"
            hx-target="body"
            hx-swap="beforeend">
            <span class="icon-pencil"></span>
            Edit settings
          </button>
          <button
            type="button"
            class="button hollow danger"
            title="Delete upload"
            hx-delete="/uploads/{{ upload.id }}?redirect=/"
            hx-trigger="click"
            hx-confirm="Are you sure you want to delete this upload?">
            <span class="icon-trash-2"></span>
            Delete upload
          </button>
          {% set opposite = "public" %}
          {% if upload.public %}
            {% set opposite = "private" %}
          {% endif %}
          <button
            type="button"
            class="button hollow"
            title="Make upload {{ opposite }}"
            hx-post="/uploads/{{ upload.id }}/public?public={{ not upload.public }}&ult_dest=/uploads/{{ upload.slug | urlencode }}"
            hx-trigger="click"
            hx-target="#upload-view-container"
            hx-select="#upload-view-container"
            hx-swap="outerHTML">
            {% if upload.public %}
              <span class="icon-lock"></span>
            {% else %}
              <span class="icon-unlock"></span>
            {% endif %}
            Make {{ opposite }}
          </button>
        {% endif %}
        <button
          class="button"
          {% if owner %}
            type="button"
            onclick="window.location.href='/uploads/{{ upload.slug }}/download'"
          {% elif can_download %}
            {% if has_password %}
              type="submit"
            {% else %}
              type="button"
              onclick="window.location.href='/uploads/{{ upload.slug }}/download'"
            {% endif %}
          {% else %}
            disabled
          {% endif %}>
          <span class="icon-download"></span>
          Download
        </button>
      </div>
    </form>
  </div>
{% endblock %}