<%# locals: (budget:) %>

<div class="space-y-2 mb-6">
  <div class="flex items-center gap-2">
    <div class="rounded-full w-1.5 h-1.5 bg-red-500"></div>

    <p class="text-gray-900 text-sm">&gt; 100% set</p>

    <p class="ml-auto text-sm space-x-1">
      <span class="text-red-500"><%= format_money(budget.allocated_spending_money) %></span>
      <span class="text-gray-500"> / </span>
      <span class="text-gray-500"><%= format_money(budget.budgeted_spending_money) %></span>
    </p>
  </div>

  <div class="relative h-1.5 rounded-2xl bg-gray-100">
    <div class="absolute inset-0 bg-red-500 rounded-2xl" style="width: 100%;"></div>
  </div>

  <div class="text-sm">
    <p class="text-gray-500">
      Budget exceeded by <span class="text-red-500"><%= format_money(budget.available_to_allocate_money.abs) %></span>
    </p>
  </div>
</div>
