feat: conistent danger zone delete flow

lib/mv_web/live/role_live/show.ex

@@ -182,15 +182,6 @@ defmodule MvWeb.RoleLive.Show do
               {gettext("Edit role")}
             </.button>
           <% end %>
-          <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not @role.is_system_role do %>
-            <.button
-              variant="danger"
-              phx-click={JS.push("delete", value: %{id: @role.id})}
-              data-confirm={gettext("Are you sure?")}
-            >
-              <.icon name="hero-trash" /> {gettext("Delete Role")}
-            </.button>
-          <% end %>
         </:actions>
       </.header>
 
@@ -216,6 +207,37 @@ defmodule MvWeb.RoleLive.Show do
           <% end %>
         </:item>
       </.list>
+
+      <%!-- Danger zone: canonical pattern (same as member show) --%>
+      <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not @role.is_system_role do %>
+        <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
+          <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
+            {gettext("Danger zone")}
+          </h2>
+          <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+            <p class="text-base-content/70 mb-4">
+              {gettext(
+                "Deleting this role cannot be undone. Users assigned to this role must be reassigned first."
+              )}
+            </p>
+            <.button
+              variant="danger"
+              phx-click={JS.push("delete", value: %{id: @role.id})}
+              data-confirm={
+                gettext(
+                  "Are you sure you want to delete the role %{name}? This action cannot be undone.",
+                  name: @role.name
+                )
+              }
+              data-testid="role-delete"
+              aria-label={gettext("Delete role %{name}", name: @role.name)}
+            >
+              <.icon name="hero-trash" class="size-4" />
+              {gettext("Delete role")}
+            </.button>
+          </div>
+        </section>
+      <% end %>
     </Layouts.app>
     """
   end