<%# locals: (category:) %>

<div id="<%= dom_id(category) %>" class="flex justify-between items-center p-4 bg-white">
  <div class="flex w-full items-center gap-2.5">
    <%= render partial: "categories/badge", locals: { category: category } %>
  </div>
  <div class="justify-self-end">
    <%= contextual_menu do %>
      <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
        <%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>

        <% if category.transactions.any? %>
          <%= link_to new_category_deletion_path(category),
              class: "flex items-center w-full rounded-lg text-red-600 hover:bg-red-50 py-2 px-3 gap-2",
              data: { turbo_frame: :modal } do %>
            <%= lucide_icon "trash-2", class: "shrink-0 w-5 h-5" %>
            <span class="text-sm"><%= t(".delete") %></span>
          <% end %>
        <% else %>
          <%= contextual_menu_destructive_item t(".delete"), category_path(category), turbo_confirm: nil %>
        <% end %>
      </div>
    <% end %>
  </div>
</div>
