" <% if filterable %> data-goals-filter-target="card"<% end %> data-goal-name="<%= goal.name %>" data-goal-status="<%= goal.display_status %>">

<%= render Goals::AvatarComponent.new(goal: goal, size: "lg") %>

<%# Name owns its row at full width — the status pill moved to the meta line below so it stops eating the title space on narrow cards. %>

<%= goal.name %>

<%= render Goals::StatusPillComponent.new(goal: goal) %> <% if secondary_line.present? %>

<%= secondary_line %>

<% end %>

<%# shrink-0 keeps the ring at full size; the name block shrinks first. %>

<%= render DS::ProgressRing.new(percent: progress_percent, tone: ring_tone) %>

<%= goal.current_balance_money.format(precision: 0) %> / <%= goal.target_amount_money.format(precision: 0) %>

<% if pace_line %>

<%= pace_line %>

<% end %>

<%# flex-wrap + gap so the account label and the footer line wrap onto separate lines under a gap when cramped, instead of butting together (the "1 accountcatch up" run-on at narrow card widths). %>

<%= render Goals::AccountStackComponent.new(accounts: linked_accounts, color_map: goal.account_color_map) %> <%= linked_accounts_count_label %>

"> <%= footer_line %><% if has_pending_pledge? %> · <%= t("goals.goal_card.pending_count", count: pending_pledges_count) %><% end %>