extract album creation form into its own fragment

sas/templates/sas/album.jinja

@@ -110,13 +110,28 @@
 
   {% if is_sas_admin %}
     </form>
-    <form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
+    {{ album_create_fragment }}
+    <form
+      class="add-files"
+      id="upload_form"
+      x-data="pictureUpload({{ album.id }})"
+      @submit.prevent="sendPictures()"
+    >
       {% csrf_token %}
       <div class="inputs">
-        {{ form.as_p() }}
-
+        <p>
+          <label for="{{ upload_form.images.id_for_label }}">{{ upload_form.images.label }} :</label>
+          {{ upload_form.images|add_attr("x-ref=pictures") }}
+          <span class="helptext">{{ upload_form.images.help_text }}</span>
+        </p>
         <input type="submit" value="{% trans %}Upload{% endtrans %}" />
+        <progress x-ref="progress" x-show="sending"></progress>
       </div>
+      <ul class="errorlist">
+        <template x-for="error in errors">
+          <li class="error" x-text="error"></li>
+        </template>
+      </ul>
     </form>
   {% endif %}
 

sas/templates/sas/fragments/album_create_form.jinja

@@ -0,0 +1,18 @@
+<form
+  class="add-files"
+  hx-post="{{ url("sas:album_create") }}"
+  hx-disabled-elt="find input[type='submit']"
+  hx-swap="outerHTML"
+>
+  {% csrf_token %}
+  <div class="inputs">
+    <div>
+      <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
+      {{ form.name }}
+    </div>
+    {{ form.parent }}
+    <input type="submit" value="{% trans %}Create{% endtrans %}" />
+  </div>
+  {{ form.non_field_errors() }}
+  {{ form.name.errors }}
+</form>

sas/templates/sas/main.jinja

@@ -61,23 +61,8 @@
 
       {% if is_sas_admin %}
         </form>
-
         <br>
-
-        <form class="add-files" action="" method="post" enctype="multipart/form-data">
-          {% csrf_token %}
-
-          <div class="inputs">
-            <div>
-              <label for="{{ form.album_name.name }}">{{ form.album_name.label }}</label>
-              {{ form.album_name }}
-            </div>
-            <input type="submit" value="{% trans %}Create{% endtrans %}" />
-          </div>
-
-          {{ form.non_field_errors() }}
-          {{ form.album_name.errors }}
-        </form>
+        {{ album_create_fragment }}
       {% endif %}
     {% endif %}
   </main>