Sith/sas/templates/sas/album.jinja

{% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import paginate_alpine %}
{% from "sas/macros.jinja" import download_button %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
{%- endblock -%}

{%- block additional_js -%}
  <script type="module" src="{{ static('bundled/sas/album-index.ts') }}"></script>
  <script type="module" src="{{ static('bundled/sas/pictures-download-index.ts') }}"></script>
{%- endblock -%}

{% block title %}
  {% trans %}SAS{% endtrans %}
{% endblock %}

{% from "sas/macros.jinja" import display_album, print_path %}


{% block content %}
  <code>
    <a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(album.parent) }} {{ album.get_display_name() }}
  </code>

  {% set is_sas_admin = user.can_edit(album) %}
  {% set start = timezone.now() %}

  {% if is_sas_admin %}
    <form action="" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="album-navbar">
        <h3>{{ album.get_display_name() }}</h3>

        <div class="toolbar">
          <a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a>
          <input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
          <input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}">
          <input {% if not clipboard %}disabled{% endif %} name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
        </div>
      </div>

      {% if clipboard %}
        <div class="clipboard">
          {% trans %}Clipboard: {% endtrans %}
          <ul>
            {% for f in clipboard %}
              <li>{{ f.get_full_path() }}</li>
            {% endfor %}
          </ul>
          <input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
        </div>
      {% endif %}
  {% endif %}

  {% if show_albums %}
    <div x-data="albums({ parentId: {{ album.id }} })" class="margin-bottom">
      <h4>{% trans %}Albums{% endtrans %}</h4>
      <div class="albums" :aria-busy="loading">
        <template x-for="album in albums" :key="album.id">
          <a :href="album.sas_url">
            <div
              x-data="{thumbUrl: album.thumbnail || '{{ static("core/img/sas.jpg") }}'}"
              class="album"
              :class="{not_moderated: !album.is_moderated}"
            >
              <img :src="thumbUrl" :alt="album.name" loading="lazy" />
              <template x-if="album.is_moderated">
                <div class="text" x-text="album.name"></div>
              </template>
              <template x-if="!album.is_moderated">
                <div class="overlay">&nbsp;</div>
                <div class="text">{% trans %}To be moderated{% endtrans %}</div>
              </template>
            </div>
            {% if is_sas_admin %}
              <input type="checkbox" name="file_list" :value="album.id">
            {% endif %}
          </a>
        </template>
      </div>
    </div>
  {% endif %}

  <div x-data="pictures({ albumId: {{ album.id }}, maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }} })">
    <h4>{% trans %}Pictures{% endtrans %}</h4>
    <br>
    {{ download_button(_("Download album")) }}
    <div class="photos" :aria-busy="loading" @pictures-upload-done.window="fetchPictures">
      <template x-for="picture in getPage(page)">
        <a :href="picture.sas_url">
          <div class="photo" :class="{not_moderated: !picture.is_moderated}">
            <img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
            <template x-if="!picture.is_moderated">
              <div class="overlay">&nbsp;</div>
              <div class="text">{% trans %}To be moderated{% endtrans %}</div>
            </template>
            <template x-if="picture.is_moderated">
              <div class="text">&nbsp;</div>
            </template>
          </div>
          {% if is_sas_admin %}
            <input type="checkbox" name="file_list" :value="picture.id">
          {% endif %}
        </a>
      </template>
    </div>
    {{ paginate_alpine("page", "nbPages()") }}
  </div>

  {% if is_sas_admin %}
    </form>
    {{ album_create_fragment }}
    <form
      class="add-files"
      id="upload_form"
      x-data="pictureUpload({{ album.id }})"
      @submit.prevent="sendPictures()"
    >
      {% csrf_token %}
      <div class="inputs">
        <p>
          <label for="{{ upload_form.images.id_for_label }}">{{ upload_form.images.label }} :</label>
          {{ upload_form.images|add_attr("x-ref=pictures") }}
          <span class="helptext">{{ upload_form.images.help_text }}</span>
        </p>
        <input type="submit" value="{% trans %}Upload{% endtrans %}" />
        <progress x-ref="progress" x-show="sending"></progress>
      </div>
      <ul class="errorlist">
        <template x-for="error in errors">
          <li class="error" x-text="error"></li>
        </template>
      </ul>
    </form>
  {% endif %}

  <hr>

  <p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
    {{ timezone.now() - start }}
  </p>
{% endblock %}