{# ===================== BUDGET ===================== #}
<div class="col-span-8 p-4 rounded-base border bg-white">
    <div class="flex justify-between mb-4">
        <h2 class="font-semibold">Budget mensuel</h2>
        <span class="text-sm text-gray-500">
            {{ monthlyBudget.month|format_date(pattern='MMMM yyyy', locale='fr')|capitalize }}
        </span>
    </div>

    <div class="space-y-3">
        {% for category in monthlyBudget.categories %}
            <div>
                <div class="flex justify-between text-sm">
                    <span>{{ category.name }}</span>

                    <span>
                        {{ (category.spent / 100)|format_currency('EUR') }}
                        /
                        {{ (category.budget / 100)|format_currency('EUR') }}
                    </span>
                </div>

                <div class="w-full h-2 bg-gray-100 rounded">
                    <div
                        class="h-2 rounded {{ category.isExceeded ? 'bg-red-500' : 'bg-green-500' }}"
                        style="width: {{ category.percentage }}%;"
                    ></div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>