fix: pictures download button

fix #1225

sas/templates/sas/album.jinja

@@ -85,7 +85,7 @@
   <div x-data="pictures({ albumId: {{ album.id }}, maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }} })">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <br>
-    {{ download_button(_("Download album")) }}
+    {{ download_button(_("Download album"), "pictures") }}
     <div class="photos" :aria-busy="loading" @pictures-upload-done.window="fetchPictures">
       <template x-for="picture in getPage(page)">
         <a :href="picture.sas_url">

sas/templates/sas/macros.jinja

@@ -36,21 +36,20 @@
 {% endmacro %}
 
 {# Helper macro to create a download button for a
-  record of albums with alpine
-
-  This needs to be used inside an alpine environment.
-  Downloaded pictures will be `pictures` from the 
-  parent data store.
+  record of albums with alpine.
 
   Note:
     This requires importing `bundled/sas/pictures-download-index.ts`
 
   Parameters:
     name (str): name displayed on the button
+    pictures (str): an alpine variable or function
+      which holds the images this button should download.
+      It must be different from "downloadPictures", or it won't work.
  #}
-{% macro download_button(name) %}
-  <div x-data="pictures_download">
-    <div x-show="albums.length > 0" x-cloak>
+{% macro download_button(name, pictures) %}
+  <div x-data="pictures_download()" x-modelable="downloadPictures" x-model="{{ pictures }}">
+    <div x-show="downloadPictures.length > 0" x-cloak>
       <button
         :disabled="isDownloading"
         class="btn btn-blue {% if name == "" %}btn-no-text{% endif %}"

sas/templates/sas/user_pictures.jinja

@@ -17,16 +17,16 @@
 {% block content %}
   <main x-data="user_pictures({ userId: {{ object.id }}, nbPictures: {{ object.nb_pictures }} })">
     {% if user.id == object.id %}
-      {{ download_button(_("Download all my pictures")) }}
+      {{ download_button(_("Download all my pictures"), "allPictures()") }}
     {% endif %}
 
     <template x-for="album in albums" x-cloak>
       <section>
         <br />
-        <div class="row">
+        <div class="row gap">
           <h4 x-text="album.name" :id="`album-${album.id}`"></h4>
           {% if user.id == object.id %}
-            &nbsp;{{ download_button("") }}
+            {{ download_button("", "album.pictures") }}
           {% endif %}
         </div>
         <div class="photos">