Sith/sas/templates/sas/picture.jinja

{% extends "core/base.jinja" %}

{%- block additional_css -%}
  <link defer rel="stylesheet" href="{{ static('bundled/core/components/ajax-select-index.css') }}">
  <link defer rel="stylesheet" href="{{ static('core/components/ajax-select.scss') }}">
  <link defer rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
{%- endblock -%}

{%- block additional_js -%}
  <script type="module" src="{{ static('bundled/core/components/ajax-select-index.ts') }}"></script>
  <script type="module" src="{{ static("bundled/sas/viewer-index.ts") }}"></script>
{%- endblock -%}

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

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

{% block content %}
  <main x-data="picture_viewer">
    <code>
      <a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(album) }} <span x-text="currentPicture.name"></span>
    </code>

    <br>

    <div class="title">
      <h3 x-text="currentPicture.name"></h3>
      <h4 x-text="`${pictures.indexOf(currentPicture) + 1 } / ${pictures.length}`"></h4>
    </div>
    <br>

    <template x-if="!currentPicture.is_moderated">
      <div class="alert alert-red" @click="console.log(currentPicture)">
        <div class="alert-main">
          <template x-if="currentPicture.asked_for_removal">
            <h3 class="alert-title">{% trans %}Asked for removal{% endtrans %}</h3>
          </template>
          <p>
            {% trans trimmed %}
              This picture can be viewed only by root users and by SAS admins.
              It will be hidden to other users until it has been moderated.
            {% endtrans %}
          </p>
          <template x-if="currentPicture.asked_for_removal">
            <div>
              <h5 @click="console.log(currentPicture.moderationRequests)">
                {% trans %}The following issues have been raised:{% endtrans %}
              </h5>
              <template x-for="req in (currentPicture.moderationRequests ?? [])" :key="req.id">
                <div>
                  <h6
                    x-text="`${req.author.first_name} ${req.author.last_name}`"
                  ></h6>
                  <i x-text="Intl.DateTimeFormat(
                             '{{ LANGUAGE_CODE }}',
                             {dateStyle: 'long', timeStyle: 'short'}
                             ).format(new Date(req.created_at))"></i>
                  <blockquote x-text="`> ${req.reason}`"></blockquote>
                </div>
              </template>
            </div>
          </template>
        </div>
        <div class="alert-aside">
          <button class="btn btn-blue" @click="moderatePicture()">
            {% trans %}Moderate{% endtrans %}
          </button>
          <button class="btn btn-red" @click.prevent="deletePicture()">
            {% trans %}Delete{% endtrans %}
          </button>
          <p x-show="!!moderationError" x-text="moderationError"></p>
        </div>
      </div>
    </template>

    <div class="container" id="pict">
      <div class="main">
        <div class="photo" :aria-busy="currentPicture.imageLoading">
          <img
            :src="currentPicture.compressed_url"
            :alt="currentPicture.name"
            id="main-picture"
            x-ref="mainPicture"
          />
        </div>

        <div class="general">
          <div class="infos">
            <h5>{% trans %}Infos{% endtrans %}</h5>
            <div>
              <div>
                <span>{% trans %}Date: {% endtrans %}</span>
                <span
                  x-text="Intl.DateTimeFormat(
                          '{{ LANGUAGE_CODE }}', {dateStyle: 'long'}
                          ).format(new Date(currentPicture.date))"
                >
                </span>
              </div>
              <div>
                <span>{% trans %}Owner: {% endtrans %}</span>
                <a :href="currentPicture.owner.profile_url" x-text="currentPicture.owner.display_name"></a>
              </div>
            </div>
          </div>

          <div class="tools">
            <h5>{% trans %}Tools{% endtrans %}</h5>
            <div>
              <div>
                <a class="text" :href="currentPicture.full_size_url">
                  {% trans %}HD version{% endtrans %}
                </a>
                <br>
                <a class="text danger" :href="`/sas/picture/${currentPicture.id}/report`">
                  {% trans %}Ask for removal{% endtrans %}
                </a>
              </div>
              <div class="buttons">
                <a class="button" :href="`/sas/picture/${currentPicture.id}/edit/`"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
                <a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
                <a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="subsection">
        <div class="navigation">
          <div id="prev" class="clickable">
            <template x-if="previousPicture">
              <div
                @keyup.left.window="currentPicture = previousPicture"
                @click="currentPicture = previousPicture"
              >
                <img :src="previousPicture.thumb_url" alt="{% trans %}Previous picture{% endtrans %}"/>
                <div class="overlay">←</div>
              </div>
            </template>
          </div>
          <div id="next" class="clickable">
            <template x-if="nextPicture">
              <div
                @keyup.right.window="currentPicture = nextPicture"
                @click="currentPicture = nextPicture"
              >
                <img :src="nextPicture.thumb_url" alt="{% trans %}Previous picture{% endtrans %}"/>
                <div class="overlay">→</div>
              </div>
            </template>
          </div>
        </div>

        <div class="tags">
          <h5>{% trans %}People{% endtrans %}</h5>
          {% if user.was_subscribed %}
            <form @submit.prevent="submitIdentification" x-show="!!selector">
              <user-ajax-select
                x-ref="search"
                multiple
                delay="300"
                placeholder="{%- trans -%}Identify users on pictures{%- endtrans -%}"
              ></user-ajax-select>
              <input type="submit" value="{% trans %}Go{% endtrans %}"/>
            </form>
          {% endif %}
          <ul>
            <template
              x-for="identification in (currentPicture.identifications || [])"
              :key="identification.id"
            >
              <li>
                <a class="user" :href="identification.user.profile_url">
                  <img class="profile-pic" :src="identification.user.profile_pict" alt="image de profil"/>
                  <span x-text="identification.user.display_name"></span>
                </a>
                <template x-if="canBeRemoved(identification)">
                  <a class="delete clickable" @click="removeIdentification(identification)"><i class="fa fa-times fa-xl delete-action"></i></a>
                </template>
              </li>
            </template>
            <template x-if="currentPicture.identificationsLoading">
                {# shadow element that exists only to put the loading wheel below
                the list of identified people #}
              <li class="loader" aria-busy="true"></li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </main>
{% endblock %}

{% block script %}
  {{ super() }}
  <script>
    window.addEventListener("DOMContentLoaded", () => {
      loadViewer({
        albumId: {{ album.id }} ,
        albumUrl: "{{ album.get_absolute_url() }}",
        firstPictureId: {{ picture.id }},  {# id of the first picture to show after page load #}
        userId: {{ user.id }},
        userIsSasAdmin: {{ (user.is_root or user.is_in_group(pk = settings.SITH_GROUP_SAS_ADMIN_ID))|tojson }}
      });
    })
  </script>
{% endblock %}