Add delete-image modal

src/components/project/client-brief/add-images-modal/AddImagesModal.vue

@@ -30,6 +30,32 @@
       </div>
     </div>
   </Dialog>
+  <Dialog
+    id="delete-image"
+    v-model:visible="deleteIsOpen"
+    modal
+    header="Êtes-vous sûr de vouloir supprimer cette image ?"
+    class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden | text-center | w-full max-w | p-16 pt-32"
+    style="--row-gap: var(--space-32); --max-w: 40rem"
+  >
+    <p class="text-grey-700 | px-16">
+      Si vous supprimez cette image, celle-ci disparaîtra de votre brief ainsi que toutes les informations qui lui sont attribuées.
+    </p>
+    <template #footer>
+      <button
+        class="btn btn--secondary | flex-1"
+        @click="deleteIsOpen = false"
+      >
+        Annuler
+      </button>
+      <button
+        class="btn | flex-1"
+        @click=""
+      >
+        Supprimer
+      </button>
+    </template>
+  </Dialog>
 </template>
 
 <script setup>
@@ -51,6 +77,8 @@ watch(isOpen, (newValue) => {
   emit("close");
 });
 
+const deleteIsOpen = false;
+
 const tabs = [
   {
     name: "Mes images",
@@ -146,6 +174,19 @@ const activeTab = ref(tabs[0]);
   width: 100%;
 }
 
+#delete-image [data-pc-section="footer"] {
+  display: flex;
+  gap: var(--space-16);
+  margin-top: var(--space-32);
+}
+#delete-image [data-pc-name="pcclosebutton"] {
+  display: none;
+}
+#delete-image_header {
+  font-family: var(--font-serif);
+  font-size: var(--text-lg);
+}
+
 .with-sidebar[data-side="right"] > * {
   height: 100%;
   overflow-y: auto;