{% extends "core/base.jinja" %}
{% 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/user/pictures-index.ts') }}"></script>
  <script type="module" src="{{ static('bundled/sas/pictures-download-index.ts') }}"></script>
{% endblock %}

{% block title %}
  {% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
{% endblock %}

{% block content %}
  <main x-data="user_pictures({ userId: {{ object.id }} })">
    {% if user.id == object.id %}
      {{ download_button(_("Download all my pictures")) }}
    {% endif %}

    <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
      <section>
        <br />
        <div class="row">
          <h4 x-text="album"></h4>
          {% if user.id == object.id %}
            &nbsp;{{ download_button("") }}
          {% endif %}
        </div>
        <div class="photos">
          <template x-for="picture in pictures">
            <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>
            </a>
          </template>
        </div>
      </section>
    </template>
    <div class="photos" :aria-busy="loading"></div>
  </main>
{% endblock content %}