{% set max = 0 %}

{% for month in cashflow.months %}
	{% set max = max(max, month.income, month.expense) %}
{% endfor %}

{# ===================== CASHFLOW ===================== #}
<div class="p-4 rounded-base border bg-white">
	<h2 class="font-semibold mb-6">Flux des 12 derniers mois</h2>

	<div class="flex items-end justify-between h-64">
		{% for month in cashflow.months %}
			<div class="flex flex-col items-center gap-2">
				<span class="text-xs text-emerald-500">{{ (month.income / 100)|format_currency('EUR') }}</span>
				<span class="text-xs text-red-500">{{ (month.expense / 100)|format_currency('EUR') }}</span>

				<div class="flex items-end gap-1 h-48">
					<div class="w-4 bg-emerald-500 rounded-t" style="height: {{ month.income > 0 ? month.income / max * 100 : 0 }}%"></div>

					<div class="w-4 bg-red-500 rounded-t" style="height: {{ month.expense > 0 ? month.expense / max * 100 : 0 }}%"></div>
				</div>

				<span class="text-xs text-gray-500">
					{{ month.label|format_date(pattern='MMMM', locale='fr')|capitalize }}
				</span>
			</div>
		{% endfor %}
	</div>
</div>