Add delete confirmation modal and update related styles and logic

static/css/style.css

@@ -302,6 +302,114 @@ body.modal-open {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
 
+/* Delete Modal specific styles */
+.delete-modal-content {
+    max-width: 500px;
+    text-align: center;
+}
+
+.delete-message {
+    color: var(--text-color);
+    margin: var(--space-2) 0;
+}
+
+.delete-model-info {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: 8px;
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+    color: var(--text-color);
+    word-break: break-all;
+}
+
+/* Update delete modal styles */
+.delete-modal {
+    display: none;  /* Set initial display to none */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: var(--z-overlay);
+}
+
+/* Add new style for when modal is shown */
+.delete-modal.show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.delete-modal-content {
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    margin: 0 auto;
+    position: relative;
+    animation: modalFadeIn 0.2s ease-out;
+}
+
+.delete-model-info {
+    /* Update info display styling */
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: 8px;
+    padding: var(--space-2);
+    margin: var(--space-2) 0;
+    color: var(--text-color);
+    word-break: break-all;
+    text-align: left;
+    line-height: 1.5;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-actions {
+    display: flex;
+    gap: var(--space-2);
+    justify-content: center;
+    margin-top: var(--space-3);
+}
+
+.cancel-btn, .delete-btn {
+    padding: 8px var(--space-2);
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    min-width: 100px;
+}
+
+.cancel-btn {
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    color: var(--text-color);
+}
+
+.delete-btn {
+    background: var(--lora-error);
+    color: white;
+}
+
+.cancel-btn:hover {
+    background: var(--lora-border);
+}
+
+.delete-btn:hover {
+    opacity: 0.9;
+}
+
 .carousel {
     display: grid;
     grid-auto-flow: column;