Move all user picture logic to sas

sas/templates/sas/user_pictures.jinja

@@ -0,0 +1,53 @@
+{% extends "core/base.jinja" %}
+{% from "sas/download_pictures.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>
+{% 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() }}
+    {% endif %}
+
+    <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
+      <section>
+        <br />
+        <h4 x-text="album"></h4>
+        <div class="photos">
+          <template x-for="picture in pictures">
+            <a :href="`/sas/picture/${picture.id}`">
+              <div
+                class="photo"
+                :class="{not_moderated: !picture.is_moderated}"
+                :style="`background-image: url(${picture.thumb_url})`"
+              >
+                <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 %}
+
+{% block script %}
+  {{ super() }}
+{% endblock script %}