<%# locals: (accountable_group:) %>
<% text_class = accountable_text_class(accountable_group.name) %>
<details class="open:bg-gray-25 group">
  <summary class="flex p-4 items-center w-full rounded-lg font-medium hover:bg-gray-50 text-gray-500 text-sm font-medium cursor-pointer">
    <%= lucide_icon("chevron-down", class: "hidden group-open:block w-5 h-5") %>
    <%= lucide_icon("chevron-right", class: "group-open:hidden w-5 h-5") %>
    <div class="ml-4 h-2.5 w-2.5 rounded-full <%= accountable_bg_class(accountable_group.name) %>"></div>
    <p class="text-gray-900 ml-2"><%= to_accountable_title(Accountable.from_type(accountable_group.name)) %></p>
    <span class="mx-1">&middot;</span>
    <div><%= accountable_group.children.count %></div>
    <div class="ml-auto text-right flex items-center gap-10 text-sm font-medium text-gray-900">
      <div class="flex items-center justify-end gap-2 w-24">
        <%= render partial: "shared/progress_circle", locals: { progress: accountable_group.percent_of_total, text_class: text_class } %>
        <p><%= accountable_group.percent_of_total.round(1) %>%</p>
      </div>
      <div class="w-24">
        <p><%= format_money accountable_group.sum %></p>
      </div>
      <div class="w-40">
        <%= render partial: "shared/trend_change", locals: { trend: accountable_group.series.trend } %>
      </div>
    </div>
  </summary>
  <div class="px-4 py-3 space-y-4">
    <% accountable_group.children.map do |account_value_node| %>
      <div class="flex items-center justify-between text-sm font-medium text-gray-900">
        <div class="flex items-center gap-4 overflow-hidden">
          <%= render "accounts/logo", account: account_value_node.original, size: "sm" %>
          <div class="truncate">
            <p><%= account_value_node.name %></p>
          </div>
        </div>
        <div class="flex gap-10 items-center text-right">
          <div class="flex items-center justify-end gap-2 w-24">
            <%= render partial: "shared/progress_circle", locals: { progress: account_value_node.percent_of_total, text_class: text_class } %>
            <p><%= account_value_node.percent_of_total %>%</p>
          </div>
          <div class="w-24">
            <p><%= format_money account_value_node.original.balance_money %></p>
          </div>
          <div class="w-40">
            <%= render partial: "shared/trend_change", locals: { trend: account_value_node.original.series.trend } %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</details>
