<%= render "budgets/budget_header", budget: @budget, previous_budget: @previous_budget, next_budget: @next_budget, latest_budget: @latest_budget %>

<%# Top Section: Donut and Summary side by side %>

<%# Budget Donut %>

<% if @budget.available_to_allocate.negative? %> <%= render "budgets/over_allocation_warning", budget: @budget %> <% else %> <%= render "budgets/budget_donut", budget: @budget %> <% end %>

<%# Actuals Summary %> <% if @budget.initialized? && @budget.available_to_allocate.positive? %> <%= render DS::Tabs.new(active_tab: params[:tab].presence || "budgeted") do |tabs| %> <% tabs.with_nav do |nav| %> <% nav.with_btn(id: "budgeted", label: t("budgets.show.tabs.budgeted")) %> <% nav.with_btn(id: "actuals", label: t("budgets.show.tabs.actual")) %> <% end %> <% tabs.with_panel(tab_id: "budgeted") do %>

<%= render "budgets/budgeted_summary", budget: @budget %>

<% end %> <% tabs.with_panel(tab_id: "actuals") do %>

<%= render "budgets/actuals_summary", budget: @budget %>

<% end %> <% end %> <% else %>

<%= render "budgets/actuals_summary", budget: @budget %>

<% end %>

<%# Bottom Section: Categories full width %>