<%# locals: (issue:) %>

<% priority_class = issue.critical? || issue.error? ? "bg-error/5" : "bg-warning/5" %>
<% text_class = issue.critical? || issue.error? ? "text-error" : "text-warning" %>

<%= tag.div class: "flex gap-6 items-center rounded-xl px-4 py-3 #{priority_class}" do %>
  <div class="flex gap-3 items-center grow <%= text_class %>">
    <%= lucide_icon("alert-octagon", class: "w-5 h-5 shrink-0") %>
    <p class="text-sm break-words"><%= issue.title %></p>
  </div>

  <div class="flex items-center gap-4 ml-auto">
    <%= link_to "Troubleshoot", issue_path(issue), class: "#{text_class} font-medium hover:underline", data: { turbo_frame: :drawer } %>
  </div>
<% end %>
