{# ===================== OBJECTIFS ===================== #}
<div class="p-4 rounded-base border bg-white">
	<h2 class="font-semibold mb-4">Objectifs d’épargne</h2>

	<div class="space-y-4">
		{% for saving in savingsGoal %}
			<div>
				<div class="flex justify-between text-sm">
					<span>{{ saving.name }}</span>
					<span>{{ (saving.getCurrentAmount() / 100)|number_format(2, ',', ' ') }}
						/
						{{ (saving.targetAmount / 100)|format_currency('EUR') }}</span>
				</div>
				<div class="h-2 bg-gray-100 rounded">
					<div class="h-2 bg-blue-500 rounded" style="width: {{ min(saving.percentage(), 100) }}%"></div>
				</div>
			</div>
        {% else %}
            <div class="rounded border border-gray-200 bg-white shadow-sm overflow-hidden px-4 py-2 text-center">
                Aucun objectif d’épargne.
            </div>
		{% endfor %}
	</div>
</div>