Add a remove image button inside the lightbox

app/views/cards/display/common/_background.html.erb

@@ -1,6 +1,14 @@
 <% if card.image.present? %>
   <div class="card__background">
     <%= image_tag card.image.presence || "", size: 120, data: { upload_preview_target: "image" } %>
+    <%= render "layouts/lightbox" do %>
+      <% if card.image.attached? %>
+        <%= button_to card_image_path(card), method: :delete, class: "btn" do %>
+          <%= icon_tag "trash" %>
+          <span class="for-screen-reader">Clear background image</span>
+        <% end %>
+      <% end %>
+    <% end %>
   </div>
 
   <%= yield %>

app/views/layouts/_lightbox.html.erb

@@ -7,6 +7,7 @@
   </figure>
 
   <div class="lightbox__actions">
+    <%= yield %>
     <button class="btn fill-white" title="Close (esc)" data-action="dialog#close keydown.esc->dialog#close:stop" data-controller="hotkey">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close image viewer (esc)</span>

app/views/layouts/application.html.erb

@@ -31,7 +31,5 @@
         </div>
       <% end %>
     </footer>
-
-    <%= render "layouts/lightbox" %>
   </body>
 </html>