Add ability to use more pictures

templates/editor.html

@@ -8,7 +8,9 @@
   <div class="two-col"><label>Category<input name="category" value="{{ post.category if post else 'Engineering' }}" placeholder="Engineering"></label><label>Summary<input name="excerpt" required value="{{ post.excerpt if post else '' }}" placeholder="The one-paragraph signal"></label></div>
   <label>Article<textarea name="body" required rows="16" placeholder="Write in plain text. Paragraph breaks are preserved.">{{ post.body if post else '' }}</textarea></label>
   <label>Article image<input name="image" type="file" accept="image/jpeg,image/png,image/webp">{% if post and post.image_filename %}<small>Leave empty to retain the current image.</small>{% endif %}</label>
+  <fieldset class="step-images"><legend>Step images</legend><p>Upload images for individual repair steps, then place <code>[[image:1]]</code>, <code>[[image:2]]</code>, and so on in the article text.</p><div id="step-image-list"><div class="step-image-row"><label>Image<input name="images" type="file" accept="image/jpeg,image/png,image/webp"></label><label>Caption<input name="image_captions" type="text" placeholder="Optional caption"></label></div></div><button class="add-step-image" type="button">Add another step image</button></fieldset>
   <button class="button" type="submit">Publish transmission <span aria-hidden="true">→</span></button>
 </form>
 </section>
+<script>document.querySelector('.add-step-image').addEventListener('click',()=>{const row=document.querySelector('.step-image-row').cloneNode(true);row.querySelectorAll('input').forEach(input=>input.value='');document.querySelector('#step-image-list').append(row)});</script>
 {% endblock %}