Add style to the delete workout modal.

views/css/workoutMenu.css

@@ -43,3 +43,17 @@
     font-size: 18px;
     max-width: 550px;
 }
+
+#deleteWorkoutModal{
+    flex-direction: column;
+    justify-content: space-around;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(100vh - 60px);
+    width: 100vw;
+    z-index: 5;
+    background: var(--dark);
+    padding: 15px;
+    text-align: center;
+}

views/index.css

@@ -116,3 +116,17 @@ body{
     position: relative;
     -webkit-tap-highlight-color: transparent;
 }
+
+.dangerButton{
+    background: linear-gradient(to bottom right, var(--accent), var(--primary), var(--accent));
+    border-radius: 15px;
+    border: none;
+    padding: 5px 25px;
+    font-size: 22px;
+    cursor: pointer;
+    position: relative;
+}
+
+.dangerText{
+    color: var(--primary);
+}

views/index.html

@@ -133,6 +133,15 @@
             <h2>You have a previously unfinished session for this workout. What would you like to to?</h2>
             <button id="resumeWorkoutCancel" class="button">Cancel</button>
         </div>
+
+        <div id="deleteWorkoutModal" style="display:none">
+            <h1>Are you sure that you want to delete this workout?</h1>
+            <h2>All workout sessions associated with the workout will also be deleted</h2>
+            <h2 class="dangerText">THIS CANNOT BE UNDONE</h2>
+
+            <button id="confirmDeleteWorkoutBtn" class="button">Delete Workout</button>
+            <button id="cancelDeleteWorkoutBtn" class="button">Cancel</button>
+        </div>
     </div>
 
     <div id="sessionPage" class="page" style="display:none">

views/js/pages/workoutMenu.js

@@ -31,6 +31,12 @@ export default {
         edit.addEventListener("click", ()=>{changePage("editWorkout", workout)});
         container.appendChild(edit);
 
+        const remove = document.createElement("button");
+        remove.classList.add("button");
+        remove.textContent = "Delete Workout";
+        remove.addEventListener("click", ()=>{this.showDeleteModal(workout)});
+        container.appendChild(remove);
+
         const back = document.createElement("button");
         back.classList.add("button");
         back.textContent = "Back";
@@ -109,5 +115,27 @@ export default {
 
     cancel: function(){
         document.getElementById("resumeWorkoutContainer").style.display = "none";
+    },
+
+    showDeleteModal: function(workout){
+        const modal = document.getElementById("deleteWorkoutModal");
+        const buttons = modal.querySelectorAll("button");
+        for(let i = 0; i < buttons.length; i++){
+            buttons[i].parentElement.removeChild(buttons[i]);
+        }
+
+        const cancel = document.createElement("button");
+        cancel.classList.add("button");
+        cancel.textContent = "Cancel";
+        cancel.addEventListener("click", ()=>{modal.style.display = "none"});
+        modal.appendChild(cancel);
+
+        const confirm = document.createElement("button");
+        confirm.classList.add("dangerButton");
+        confirm.textContent = "Delete Workout";
+        confirm.addEventListener("click", ()=>{this.delete(workout)});
+        modal.appendChild(confirm);
+
+        modal.style.display = "flex";
     }
 }