From aa31701ac88fc428eeeef04c4d7b23fac86956a7 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Sun, 8 Jun 2025 15:46:34 -0500
Subject: [PATCH] feat: speedbump for deleting monitors

---
 .../components/DownloadListRow.html.twig      |  4 +-
 templates/components/Modal.html.twig          |  4 +-
 templates/components/MonitorListRow.html.twig | 43 ++++++++++++++++---
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/templates/components/DownloadListRow.html.twig b/templates/components/DownloadListRow.html.twig
index 2bf132d..ee8a647 100644
--- a/templates/components/DownloadListRow.html.twig
+++ b/templates/components/DownloadListRow.html.twig
@@ -33,8 +33,8 @@
         {% endif %}
     </td>
     <td class="px-6 py-4 flex flex-row align-middle justify-center">
-        {% set cancel_button = component('ux:icon', {name: 'ic:twotone-cancel', width: '18px', class: 'rounded-full align-middle text-red-600' }) %}
-        <twig:Modal heading="But wait!" button_text="{{ cancel_button }}" submit_action="{{ stimulus_action('download_list', 'deleteDownload', 'click', {id: download.id}) }}" show_cancel show_submit>
+        {% set delete_button = component('ux:icon', {name: 'ic:twotone-cancel', width: '18px', class: 'rounded-full align-middle text-red-600' }) %}
+        <twig:Modal heading="But wait!" button_text="{{ delete_button }}" submit_action="{{ stimulus_action('download_list', 'deleteDownload', 'click', {id: download.id}) }}" show_cancel show_submit>
             Are you sure you want to delete <span class="font-bold">{{ download.filename }}</span>?
         </twig:Modal>
 
diff --git a/templates/components/Modal.html.twig b/templates/components/Modal.html.twig
index 9d6fda3..2847967 100644
--- a/templates/components/Modal.html.twig
+++ b/templates/components/Modal.html.twig
@@ -9,12 +9,12 @@
         {% if show_cancel is defined or show_submit is defined %}
             <div class="flex justify-end">
             {% if show_cancel is defined %}
-                <button type="button" data-action="dialog#close" class="px-1 py-1 rounded-md self-end w-16" autofocus>
+                <button type="button" data-action="dialog#close" class="px-1 py-1 rounded-md self-end w-16 hover:bg-stone-100" autofocus>
                     {{ cancel_text|default('Cancel') }}
                 </button>
             {% endif %}
             {% if show_submit is defined %}
-                <button type="button" {{ submit_action|raw }} class="px-1 py-1 rounded-md bg-orange-500 self-end text-white w-16 ml-2" autofocus>
+                <button type="button" {{ submit_action|raw }} class="px-1 py-1 rounded-md bg-orange-500 self-end text-white w-16 ml-2 hover:bg-orange-600" autofocus>
                     {{ submit_text|default('Submit') }}
                 </button>
             {% endif %}
diff --git a/templates/components/MonitorListRow.html.twig b/templates/components/MonitorListRow.html.twig
index 716bdc9..e3b4ad9 100644
--- a/templates/components/MonitorListRow.html.twig
+++ b/templates/components/MonitorListRow.html.twig
@@ -33,12 +33,41 @@
         {% endif %}
     </td>
     <td class="px-6 py-4 flex flex-row align-middle justify-center">
-        <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}>
-            <twig:ux:icon
-                    name="ic:twotone-cancel" width="18px"
-                    class="rounded-full align-middle text-red-600"
-                    title="Remove {{ monitor.title }} from your Monitor list."
-            />
-        </button>
+        {% set delete_button = component('ux:icon', {name: 'ic:twotone-cancel', width: '18px', class: 'rounded-full align-middle text-red-600' }) %}
+        <twig:Modal heading="But wait!" button_text="{{ delete_button }}" submit_action="{{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}" show_cancel show_submit>
+            Are you sure you want to delete this monitor?<br />
+            <div class="mt-2 border-2 border-orange-500 overflow-hidden rounded-lg">
+                <table class="table-auto">
+                    <tr>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
+                            {{ monitor.title }}
+                        </td>
+                        {% if monitor|monitor_media_id != "-" %}
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                                {{ monitor|monitor_media_id }}
+                            </td>
+                        {% endif %}
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                            {% if monitor.monitorType == "tvshow" %}
+                                <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                            {% elseif monitor.monitorType == "tvseason" %}
+                                <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                            {% else %}
+                                <twig:StatusBadge color="fuchsia" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                            {% if monitor.status == "New" %}
+                                <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
+                            {% elseif monitor.status == "In Progress" or monitor.status == "Active" %}
+                                <twig:StatusBadge color="purple" status="{{ monitor.status }}" />
+                            {% else %}
+                                <twig:StatusBadge color="green" status="{{ monitor.status }}" />
+                            {% endif %}
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </twig:Modal>
     </td>
 </tr>