show all pages in preview portion

app/javascript/template_builder/builder.vue

@@ -86,6 +86,7 @@
           @up="moveDocument(item, -1)"
           @down="moveDocument(item, 1)"
           @change="save"
+          @remove-image="removeImage"
         />
         <div
           class="sticky bottom-0 py-2"
@@ -740,6 +741,26 @@ export default {
         }),
         headers: { 'Content-Type': 'application/json' }
       })
+    },
+    removeImage (imageId) {
+      console.log(this.template.documents[0].preview_secured_images)
+      // output: 0: {id: 26, name: 'preview_images', uuid: 'db2de68e-c52f-41e0-a743-550a5ba26ec0', record_type: 'ActiveStorage::Attachment', record_id: 25, …} 1 : {id: 27, name: 'preview_images', uuid: '4f2cd882-95fb-4344-8571-78c9bb5a20aa', record_type: 'ActiveStorage::Attachment', record_id: 25, …} 2: {id: 28, name: 'preview_images', uuid: '28bb656a-0799-4a73-b665-692aab2c690b', record_type: 'ActiveStorage::Attachment', record_id: 25, …} length: 3, imageId: 27
+      // const indexToRemove = this.template.documents.findIndex(item => item.id === imageId)
+      this.template.documents.forEach((document) => {
+        // Check if the document has a preview_images array
+        if (Array.isArray(document.preview_images)) {
+          // Find the index of the preview image with the matching id
+          console.log('simple preview', document.preview_images, ': secured', document.preview_secured_images)
+          const indexToRemove = document.preview_images.findIndex(
+            (previewImage) => previewImage.id === imageId
+          )
+          if (indexToRemove !== -1) {
+            document.preview_images.splice(indexToRemove, 1)
+            // Optionally, emit a 'change' event if needed
+            // this.$emit('change');
+          }
+        }
+      })
     }
   }
 }

app/javascript/template_builder/preview.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="relative">
+    <div v-for="(previewImage, index) in document.preview_images" :key="previewImage.id" class="relative">
       <img
         :src="previewImage.url"
         :width="previewImage.metadata.width"
@@ -8,12 +8,15 @@
         class="rounded border"
         loading="lazy"
       >
+      <div class="absolute bottom-0 left-0 bg-white text-gray-700 p-1">
+        {{ index + 1 }}
+      </div>
       <div
         class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
         @click="$emit('scroll-to', item)"
       >
         <div
-          v-if="editable"
+          v-if="editable && index==0"
           class="flex justify-between w-full"
         >
           <div style="width: 26px" />
@@ -32,7 +35,7 @@
           >
             <div>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-red-500 hover:border-base-content w-full transition-colors"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('remove', item)"
               >
@@ -44,14 +47,14 @@
               class="flex flex-col space-y-1"
             >
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-red-500 hover:border-base-content w-full transition-colors"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('up', item)"
               >
                 &uarr;
               </button>
               <button
-                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+                class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-red-500 hover:border-base-content w-full transition-colors"
                 style="width: 24px; height: 24px"
                 @click.stop="$emit('down', item)"
               >
@@ -60,6 +63,22 @@
             </div>
           </div>
         </div>
+        <div
+          v-else
+          class="flex justify-between w-full"
+        >
+          <div
+            class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
+          >
+            <button
+              class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+              style="width: 24px; height: 24px"
+              @click.stop="$emit('remove-image', previewImage.id)"
+            >
+              &times;
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     <div class="flex pb-2 pt-1.5">
@@ -119,7 +138,7 @@ export default {
       default: true
     }
   },
-  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace'],
+  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'remove-image'],
   computed: {
     previewImage () {
       return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))[0]