{# ===================== RECURRING ===================== #}
<div class="col-span-4 p-4 rounded-base border bg-white">
	<h2 class="font-semibold mb-4">Charges à venir</h2>

	<ul class="space-y-3 text-sm">
		{% for recurring in nextRecurrings %}
			<li class="flex justify-between">
				<span>{{ recurring.name }}</span>
				<span class="text-gray-500">{{ (recurring.amount / 100)|format_currency('EUR') }}
					· {{ recurring.days }}j</span>
			</li>
		{% else %}
			<li class="text-gray-500">Aucune charge à venir</li>
		{% endfor %}
	</ul>
</div>