{% 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(config)">
    <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>

    {# Non-moderated pictures (hence, this moderation alert too)
       should be shown only to admins and to the picture owner.
       Admins should see all infos and have access to all actions.
       Non-admin picture owners should only see the message warning them that
       the picture isn't moderated yet. #}
    <template x-if="!currentPicture.is_moderated">
      <div id="picture-moderation-alert" class="alert alert-red">
        <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>
          {% if user.has_perm("sas.moderate_sasfile") %}
            <template x-if="currentPicture.asked_for_removal">
              <div>
                <h5>{% 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>
          {% endif %}
        </div>
        {% if user.has_perm("sas.moderate_sasfile") %}
          <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>
        {% endif %}
      </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="currentPicture.report_url">
                  {% trans %}Ask for removal{% endtrans %}
                </a>
              </div>
              <div class="buttons">
                <a class="button" :href="currentPicture.edit_url"><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 %}
  <script>
    const config = {
      albumId: {{ album.id }},
      albumUrl: "{{ album.get_absolute_url() }}",
      firstPictureId: {{ picture.id }},  {# id of the first picture to show after page load #}
      userId: {{ user.id }},
      userCanModerate: {{ user.has_perm("sas.moderate_sasfile")|tojson }}
    }
  </script>
{% endblock %}