1 files changed, 88 insertions, 9 deletions
diff --git a/webmentions_ssg/templates/received.html b/webmentions_ssg/templates/received.html
index ea74557..64f225e 100644
--- a/webmentions_ssg/templates/received.html
+++ b/webmentions_ssg/templates/received.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% from "bootstrap5/form.html" import render_form %}
 {% from "bootstrap5/pagination.html" import render_pagination %}
 {% block content %}
   <div class="d-flex justify-content-between align-items-center mb-3">
@@ -16,16 +17,20 @@
             <th scope="col">Received</th>
             <th scope="col">Updated</th>
             <th scope="col">Reason</th>
+            <th scope="col">Actions</th>
           </tr>
         </thead>
         <tbody>
           {% for webmention in webmentions %}
-            {% if webmention.status == "verified" %}
+            {% if webmention.status == "received" %}
+              {% set row_class = "table-info" %}
+              {% set display_status = "Pending" %}
+            {% elif webmention.status == "verifying" %}
+              {% set row_class = "table-warning" %}
+              {% set display_status = "Verifying" %}
+            {% elif webmention.status == "verified" %}
               {% set row_class = "table-success" %}
               {% set display_status = "Verified" %}
-            {% elif webmention.status in ("received", "verifying") %}
-              {% set row_class = "table-warning" %}
-              {% set display_status = "Pending" %}
             {% else %}
               {% set row_class = "table-danger" %}
               {% set display_status = "Declined" %}
@@ -51,19 +56,93 @@
                 </time>
               </td>
               <td>{{ webmention.failure_reason or "—" }}</td>
+              <td class="text-nowrap">
+                <button type="button"
+                        class="btn btn-sm btn-primary"
+                        data-bs-toggle="modal"
+                        data-bs-target="#confirmation-modal"
+                        data-action="{{ url_for('root.reverify_received_webmention', identifier=webmention.uuid, page=webmentions.page) }}"
+                        data-title="Reverify webmention?"
+                        data-message="The webmention will be fetched and verified again."
+                        data-confirm-label="Reverify"
+                        data-confirm-class="btn-primary">Reverify</button>
+                <button type="button"
+                        class="btn btn-sm btn-danger"
+                        data-bs-toggle="modal"
+                        data-bs-target="#confirmation-modal"
+                        data-action="{{ url_for('root.delete_received_webmention', identifier=webmention.uuid, page=webmentions.page) }}"
+                        data-title="Delete webmention?"
+                        data-message="This permanently deletes the webmention and cannot be undone."
+                        data-confirm-label="Delete"
+                        data-confirm-class="btn-danger">Delete</button>
+              </td>
             </tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
     {% if webmentions.pages > 1 %}
-      <div class="mt-3">
-        {{ render_pagination(webmentions,
-                align="center",
-                size="sm") }}
-      </div>
+      <div class="mt-3">{{ render_pagination(webmentions) }}</div>
     {% endif %}
+    <div class="modal fade"
+         id="confirmation-modal"
+         tabindex="-1"
+         aria-labelledby="confirmation-modal-title"
+         aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="confirmation-modal-title"></h1>
+            <button type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <p id="confirmation-modal-message" class="mb-0"></p>
+          </div>
+          <div class="modal-footer">
+            {{ render_form(action_form,
+                        id="confirmation-modal-form",
+                        button_style="primary",
+                        form_group_classes="mb-0") }}
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
   {% else %}
     <p class="text-body-secondary">No Webmentions have been received yet.</p>
   {% endif %}
 {% endblock %}
+{% block scripts %}
+  {{ super() }}
+  <script>
+    const confirmationModal = document.getElementById(
+      "confirmation-modal"
+    );
+
+    confirmationModal.addEventListener("show.bs.modal", (event) => {
+      const button = event.relatedTarget;
+
+      const form = confirmationModal.querySelector(
+        "#confirmation-modal-form"
+      );
+      const title = confirmationModal.querySelector(
+        "#confirmation-modal-title"
+      );
+      const message = confirmationModal.querySelector(
+        "#confirmation-modal-message"
+      );
+      const submit = form.querySelector("#submit");
+
+      form.action = button.dataset.action;
+
+      title.textContent = button.dataset.title;
+      message.textContent = button.dataset.message;
+
+      submit.value = button.dataset.confirmLabel;
+      submit.className = `btn ${button.dataset.confirmClass}`;
+    });
+  </script>
+{% endblock %}