From 73b96155fcd54b958fe8c676db028fd4fc4fabe4 Mon Sep 17 00:00:00 2001
From: stilbruch <stilbruch@protonmail.com>
Date: Wed, 6 Apr 2022 15:54:13 -0500
Subject: Add confirmation modal for deleting a workout

---
 app/templates/home.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'app/templates/home.html')

diff --git a/app/templates/home.html b/app/templates/home.html
index 4d5cb8a..a8cf949 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -63,10 +63,27 @@
 										<td class="level-right">
 											<p class="buttons">
 												<a class="button is-small is-primary" href="/workout/edit?id={{ workout.id }}">Edit</a>
-												<a class="button is-small is-danger" href="#">Delete</a>
+												<a class="button is-small is-danger js-modal-trigger" data-target="modal-{{ workout.id }}" href="#">Delete</a>
 											</p>
 										</td>
 									</tr>
+									<!-- Confirmation Modal -->
+									<div class="modal" id="modal-{{ workout.id }}">
+										<div class="modal-background"></div>
+										<div class="modal-card">
+											<section class="modal-card-body">
+												<h1 class="title has-text-black">Are you sure?</h1>
+												<p>
+													Are you sure you want to delete this workout?
+													You will not be able to restore it once you do.
+												</p>
+											</section>
+											<footer class="modal-card-foot">
+												<button class="button is-danger">Confirm</button>
+												<button class="button">Cancel</button>
+											</footer>
+										</div>
+									</div>
 								{% endfor %}
 							</tbody>
 						</table>
-- 
cgit v1.2.3