From e9fb1ec7d85a2d3d3e720af262f917b937c0f534 Mon Sep 17 00:00:00 2001
From: Kobe <kobeamerijckx@outlook.com>
Date: Sun, 25 May 2025 13:47:22 +0200
Subject: [PATCH] separate modals from room template

---
 .../components/delete_confirm_modal.html      |  30 ++++
 templates/components/move_modal.html          |  24 ++++
 templates/components/new_folder_modal.html    |  19 +++
 .../components/overwrite_confirm_modal.html   |  20 +++
 templates/components/rename_modal.html        |  19 +++
 templates/rooms/room.html                     | 136 +-----------------
 6 files changed, 118 insertions(+), 130 deletions(-)
 create mode 100644 templates/components/delete_confirm_modal.html
 create mode 100644 templates/components/move_modal.html
 create mode 100644 templates/components/new_folder_modal.html
 create mode 100644 templates/components/overwrite_confirm_modal.html
 create mode 100644 templates/components/rename_modal.html

diff --git a/templates/components/delete_confirm_modal.html b/templates/components/delete_confirm_modal.html
new file mode 100644
index 0000000..06ec4a4
--- /dev/null
+++ b/templates/components/delete_confirm_modal.html
@@ -0,0 +1,30 @@
+<!-- Delete Confirmation Modal -->
+<div id="deleteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="deleteConfirmLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="deleteConfirmLabel">Move to Trash</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="d-flex align-items-center gap-3 mb-3">
+          <i class="fas fa-trash text-danger" style="font-size: 2rem;"></i>
+          <div>
+            <h6 class="mb-1">Move to Trash</h6>
+            <p class="text-muted mb-0" id="deleteFileName"></p>
+          </div>
+        </div>
+        <div class="alert alert-info">
+          <i class="fas fa-info-circle me-2"></i>
+          This item will be moved to trash. You can restore it from the trash page within 30 days.
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-danger" id="confirmDeleteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">
+          <i class="fas fa-trash me-1"></i>Move to Trash
+        </button>
+      </div>
+    </div>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/templates/components/move_modal.html b/templates/components/move_modal.html
new file mode 100644
index 0000000..eb2f249
--- /dev/null
+++ b/templates/components/move_modal.html
@@ -0,0 +1,24 @@
+<!-- Move Modal -->
+<div class="modal fade" id="moveModal" tabindex="-1" aria-labelledby="moveModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="moveModalLabel">Move File</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="mb-3">
+                    <label for="moveTargetFolder" class="form-label">Select Target Folder</label>
+                    <select class="form-select" id="moveTargetFolder">
+                        <option value="">Root Folder</option>
+                    </select>
+                </div>
+                <div id="moveError" class="text-danger"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" id="confirmMoveBtn" style="background-color:#16767b; border:1px solid #16767b;">Move</button>
+            </div>
+        </div>
+    </div>
+</div> 
\ No newline at end of file
diff --git a/templates/components/new_folder_modal.html b/templates/components/new_folder_modal.html
new file mode 100644
index 0000000..1ee17ed
--- /dev/null
+++ b/templates/components/new_folder_modal.html
@@ -0,0 +1,19 @@
+<!-- New Folder Modal -->
+<div id="newFolderModal" class="modal fade" tabindex="-1" aria-labelledby="newFolderLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="newFolderLabel">Create New Folder</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <input type="text" id="folderNameInput" class="form-control" placeholder="Folder name" autocomplete="off" />
+        <div id="folderError" class="text-danger mt-2"></div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="createFolderBtn" style="background-color: #16767b; border-color: #16767b;">Create</button>
+      </div>
+    </div>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/templates/components/overwrite_confirm_modal.html b/templates/components/overwrite_confirm_modal.html
new file mode 100644
index 0000000..c80d989
--- /dev/null
+++ b/templates/components/overwrite_confirm_modal.html
@@ -0,0 +1,20 @@
+<!-- Overwrite Confirmation Modal -->
+<div id="overwriteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="overwriteConfirmLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="overwriteConfirmLabel">Overwrite File?</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p id="overwriteFileMsg">A file with this name already exists. Do you want to overwrite <span id="overwriteFileName" class="fw-bold"></span>?</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" id="skipOverwriteBtn">Skip</button>
+        <button type="button" class="btn btn-secondary" id="skipAllOverwriteBtn">Skip All</button>
+        <button type="button" class="btn btn-danger" id="confirmOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite</button>
+        <button type="button" class="btn btn-danger" id="confirmAllOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite All</button>
+      </div>
+    </div>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/templates/components/rename_modal.html b/templates/components/rename_modal.html
new file mode 100644
index 0000000..ef36a22
--- /dev/null
+++ b/templates/components/rename_modal.html
@@ -0,0 +1,19 @@
+<!-- Rename Modal -->
+<div id="renameModal" class="modal fade" tabindex="-1" aria-labelledby="renameLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="renameLabel">Rename</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div id="renameInputGroup"></div>
+        <div id="renameError" class="text-danger mt-2"></div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="confirmRenameBtn" style="background-color: #16767b; border-color: #16767b;">Rename</button>
+      </div>
+    </div>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/templates/rooms/room.html b/templates/rooms/room.html
index bba89b0..f324e7e 100644
--- a/templates/rooms/room.html
+++ b/templates/rooms/room.html
@@ -88,136 +88,12 @@
     </div>
 </div>
 
-<div id="deleteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="deleteConfirmLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="deleteConfirmLabel">Move to Trash</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="d-flex align-items-center gap-3 mb-3">
-          <i class="fas fa-trash text-danger" style="font-size: 2rem;"></i>
-          <div>
-            <h6 class="mb-1">Move to Trash</h6>
-            <p class="text-muted mb-0" id="deleteFileName"></p>
-          </div>
-        </div>
-        <div class="alert alert-info">
-          <i class="fas fa-info-circle me-2"></i>
-          This item will be moved to trash. You can restore it from the trash page within 30 days.
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-danger" id="confirmDeleteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">
-          <i class="fas fa-trash me-1"></i>Move to Trash
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div id="newFolderModal" class="modal fade" tabindex="-1" aria-labelledby="newFolderLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="newFolderLabel">Create New Folder</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <input type="text" id="folderNameInput" class="form-control" placeholder="Folder name" autocomplete="off" />
-        <div id="folderError" class="text-danger mt-2"></div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-primary" id="createFolderBtn" style="background-color: #16767b; border-color: #16767b;">Create</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div id="renameModal" class="modal fade" tabindex="-1" aria-labelledby="renameLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="renameLabel">Rename</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div id="renameInputGroup"></div>
-        <div id="renameError" class="text-danger mt-2"></div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-primary" id="confirmRenameBtn" style="background-color: #16767b; border-color: #16767b;">Rename</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Details Modal -->
-<div id="detailsModal" class="modal fade" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="detailsModalLabel">Item Details</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body" id="detailsModalBody">
-        <!-- Populated by JS -->
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div id="overwriteConfirmModal" class="modal fade" tabindex="-1" aria-labelledby="overwriteConfirmLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="overwriteConfirmLabel">Overwrite File?</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <p id="overwriteFileMsg">A file with this name already exists. Do you want to overwrite <span id="overwriteFileName" class="fw-bold"></span>?</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" id="skipOverwriteBtn">Skip</button>
-        <button type="button" class="btn btn-secondary" id="skipAllOverwriteBtn">Skip All</button>
-        <button type="button" class="btn btn-danger" id="confirmOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite</button>
-        <button type="button" class="btn btn-danger" id="confirmAllOverwriteBtn" style="background-color: #b91c1c; border-color: #b91c1c;">Overwrite All</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Move Modal -->
-<div class="modal fade" id="moveModal" tabindex="-1" aria-labelledby="moveModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="moveModalLabel">Move File</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="mb-3">
-                    <label for="moveTargetFolder" class="form-label">Select Target Folder</label>
-                    <select class="form-select" id="moveTargetFolder">
-                        <option value="">Root Folder</option>
-                    </select>
-                </div>
-                <div id="moveError" class="text-danger"></div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" id="confirmMoveBtn" style="background-color:#16767b; border:1px solid #16767b;">Move</button>
-            </div>
-        </div>
-    </div>
-</div>
+{% include 'components/delete_confirm_modal.html' %}
+{% include 'components/new_folder_modal.html' %}
+{% include 'components/rename_modal.html' %}
+{% include 'components/details_modal.html' %}
+{% include 'components/overwrite_confirm_modal.html' %}
+{% include 'components/move_modal.html' %}
 
 <script>
 // Define showDetailsModal function first