From ec463ff4c812d448b53c3ab8e037204b7dce4e9b Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Fri, 6 Nov 2020 12:51:49 -0800
Subject: [PATCH] Confirm deleting readthroughs

---
 bookwyrm/templates/book.html                  | 40 ++++++++++++++-----
 .../templates/snippets/shelve_button.html     |  4 +-
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index de286d62..9a0ad1e4 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -82,20 +82,16 @@
                                 <span class="is-sr-only">Edit readthrough dates</span>
                             </span>
                         </label>
-                        <form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
-                            {% csrf_token %}
-                            <input type="hidden" name="id" value="{{ readthrough.id }}">
-                            <button class="button is-small" type="submit">
-                                <span class="icon icon-x">
-                                    <span class="is-sr-only">Delete this readthrough</span>
-                                </span>
-                            </button>
-                        </form>
+                        <label class="button is-small" for="delete-readthrough-{{ readthrough.id }}">
+                            <span class="icon icon-x">
+                                <span class="is-sr-only">Delete this readthrough</span>
+                            </span>
+                        </label>
                     </div>
                 </div>
             </div>
 
-            <div class="content block">
+            <div>
                 <input class="toggle-control" type="radio" name="show-edit-readthrough" id="edit-readthrough-{{ readthrough.id }}">
                 <div class="toggle-content hidden">
                     <form name="edit-readthrough" action="/edit-readthrough" method="post">
@@ -120,6 +116,30 @@
                     </form>
                 </div>
             </div>
+
+            <div>
+                <input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
+                <div class="modal toggle-content hidden">
+                    <div class="modal-background"></div>
+                    <div class="modal-card">
+                        <header class="modal-card-head">
+                            <p class="modal-card-title">Delete this read-though?</p>
+                            <label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
+                        </header>
+                        <footer class="modal-card-foot">
+			    <form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
+				{% csrf_token %}
+				<input type="hidden" name="id" value="{{ readthrough.id }}">
+				<button class="button is-danger" type="submit">
+				    Delete
+				</button>
+				<label for="delete-readthrough-{{ readthrough.id }}" class="button">Cancel</button>
+			    </form>
+                        </footer>
+                    </div>
+                    <label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
+                </div>
+            </div>
             {% endfor %}
 
             {% if request.user.is_authenticated %}
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index bf1db9b6..eee89728 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -87,14 +87,14 @@
                             {% include 'snippets/privacy_select.html' %}
                         </div>
                         <div class="column">
-                            <button type="submit" class="button is-success">Save</button>
+                            <button class="button is-success" type="submit">Save</button>
                             <label for="start-reading-{{ uuid }}" class="button">Cancel</button>
                         </div>
                     </div>
                 </footer>
             </form>
         </div>
-        <label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close"></label>
+        <label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
     </div>
 </div>