Added Delete Sim

src/routes/simulation/[id]/+page.svelte

@@ -218,6 +218,27 @@
         saveError = "";
         uploadFiles = null;
     }
+
+    async function handleDelete() {
+        if (
+            !confirm(
+                "Are you sure you want to permanently delete this simulation and all its associated media files?",
+            )
+        ) {
+            return;
+        }
+        const res = await fetch(`/api/simulations/${id}`, {
+            method: "DELETE",
+        });
+
+        if (res.ok) {
+            // Force client-side redirect back to cleanly wiped root
+            window.location.href = "/";
+        } else {
+            const text = await res.text();
+            alert("Failed to delete the simulation: " + text);
+        }
+    }
 </script>
 
 <a href="/" class="back-link">&lt;&lt; Back to Index</a>
@@ -233,6 +254,7 @@
             <button class="edit-btn" onclick={() => (isEditing = true)}
                 >Edit</button
             >
+            <button class="delete-btn" onclick={handleDelete}>Delete</button>
         {:else}
             <div class="edit-form">
                 <h2>Edit Simulation</h2>
@@ -469,7 +491,8 @@
     }
     .edit-btn,
     .save-btn,
-    .cancel-btn {
+    .cancel-btn,
+    .delete-btn {
         padding: 6px 15px;
         font-size: 14px;
         font-weight: bold;
@@ -483,6 +506,15 @@
     .cancel-btn:hover {
         background-color: #d0d0d0;
     }
+    .delete-btn {
+        background-color: #ffcccc;
+        color: #990000;
+        border-color: #990000;
+        margin-left: auto;
+    }
+    .delete-btn:hover {
+        background-color: #ff9999;
+    }
 
     .edit-form {
         border: 1px dashed #000;