{# ===================== KPI ===================== #}
<div class="grid grid-cols-4 gap-4">
	<div class="p-4 rounded-base border bg-white">
		<p class="text-xs text-gray-500">Solde global</p>

		<p class="text-2xl font-semibold">
			{{ (kpi.globalBalance / 100)|format_currency('EUR') }}
		</p>

		<p class="text-xs {{ kpi.monthVariation > 0 ? 'text-emerald-600' : 'text-red-600' }}">
			{{ kpi.monthVariation > 0 ? '+' : '' }}
			{{ (kpi.monthVariation / 100)|format_currency('EUR') }}
			ce mois
		</p>
	</div>

	<div class="p-4 rounded-base border bg-white">
		<p class="text-xs text-gray-500">Dépenses du mois</p>

		<p class="text-2xl font-semibold">
			{{ (kpi.monthExpenses / 100)|format_currency('EUR') }}
		</p>

		<p class="text-xs {{ kpi.expenseEvolution < 0 ? 'text-emerald-600' : 'text-red-600' }}">
			{{ kpi.expenseEvolution }}
			% vs mois dernier
		</p>
	</div>

	<div class="p-4 rounded-base border bg-white">
		<p class="text-xs text-gray-500">Taux d’épargne</p>

		<p class="text-2xl font-semibold">
			{{ kpi.savingRate }}
			%
		</p>
	</div>

	<div class="p-4 rounded-base border bg-white">
		<p class="text-xs text-gray-500">Prochaine charge</p>

		<p class="text-2xl font-semibold">
			{{ kpi.nextCharge ? (kpi.nextCharge.amount / 100)|format_currency('EUR') : 'Aucune charge à venir' }}
		</p>

		{% if kpi.nextCharge %}
			<p class="text-xs text-gray-500">
				{{ kpi.nextCharge.category.name }}
				·
				{{ kpi.nextCharge.nextExecution|date('d/m') }}
			</p>
		{% endif %}
	</div>
</div>