{% extends 'base.html.twig' %}

{% block title %}Emprunts
{% endblock %}

{% block body %}
	<div class="p-4 max-w-5xl mx-auto">
		<div class="flex justify-between items-center mb-6">
			<h1 class="text-2xl font-bold">Emprunts</h1>

			<a href="{{ path('app_loan_new') }}" class="button-style brand-button-style">
				+ Nouvel emprunt
			</a>
		</div>

		<div class="grid gap-4">
			{% for loan in loans %}
				{% set progress = loan.initialAmount > 0 ? ((loan.initialAmount - loan.remainingAmount) / loan.initialAmount) * 100 : 0 %}

				<a href="{{ path('app_loan_show', {id: loan.id}) }}" class="bg-white shadow rounded-xl p-5 hover:bg-gray-50 transition space-y-3">
					<div class="flex justify-between items-start">
						<div>
							<div class="text-lg font-bold">
								{{ loan.name }}
							</div>

							<div class="text-sm text-gray-500">
								{{ loan.lender }}
							</div>
						</div>

						<div class="text-right">
							<div class="text-sm text-gray-500">Capital initial</div>
							<div class="font-semibold">
								{{ (loan.initialAmount / 100)|format_currency('EUR') }}
							</div>
						</div>
					</div>

					{# Remaining #}
					<div class="flex justify-between text-sm">
						<div>
							<span class="text-gray-500">Restant dû :</span>
							<span class="font-semibold">
								{{ (loan.remainingAmount / 100)|format_currency('EUR') }}
							</span>
						</div>

						<div>
							<span class="font-semibold text-blue-600">
								{{ progress|round(0) }}
								%
							</span>
						</div>
					</div>

					{# Progress bar #}
					<div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
						<div class="bg-blue-600 h-2" style="width: {{ progress }}%"></div>
					</div>

					{# Footer #}
					<div class="flex justify-between text-sm pt-1">

						<div>
							<span class="text-gray-500">Mensualité :</span>
							<span class="font-semibold">
								{{ (loan.monthlyPayment / 100)|format_currency('EUR') }}
							</span>
						</div>

						<div>
							<span class="text-gray-500">Fin prévue :</span>
							<span class="font-semibold">
								{{ loan.endDate ? loan.endDate|date('d/m/Y') : '—' }}
							</span>
						</div>
					</div>
				</a>
			{% else %}
				<div class="rounded border border-gray-200 bg-white shadow-sm overflow-hidden px-4 py-2 text-center">
					Aucun emprunt défini.
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}