{{ form_start(form, { 'attr': { 'class': 'max-w-xl mx-auto space-y-4' } }) }}
<div class="grid md:grid-cols-2 md:gap-6">
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.name) }}
		{{ form_label(form.name) }}
	</div>
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.lender) }}
		{{ form_label(form.lender) }}
	</div>
</div>

<div class="grid md:grid-cols-2 md:gap-6">
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.account) }}
	</div>
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.category) }}
	</div>
</div>

<div class="grid md:grid-cols-2 md:gap-6">
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.startDate) }}
		{{ form_label(form.startDate) }}
	</div>
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.durationMonths) }}
		{{ form_label(form.durationMonths) }}
	</div>
</div>

<div class="grid md:grid-cols-4 md:gap-6">
	<div class="relative z-0 w-full mb-5 group">
		<div class="flex items-center text-gray-500 dark:text-gray-200">
			{{ form_widget(form.initialAmount) }}
		</div>
		{{ form_label(form.initialAmount) }}
	</div>
	<div class="relative z-0 w-full group">
		<div class="flex items-center text-gray-500 dark:text-gray-200">
			{{ form_widget(form.monthlyPayment) }}
		</div>
		{{ form_label(form.monthlyPayment) }}
	</div>
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.interestRate) }}
		{{ form_label(form.interestRate) }}
	</div>
	<div class="relative z-0 w-full mb-5 group">
		{{ form_widget(form.insuranceRate) }}
		{{ form_label(form.insuranceRate) }}
	</div>
</div>

<div class="flex items-center gap-4">
	<button type="submit" class="button-style success-button-style">
		{{ form.vars.value.id ? 'Mettre à jour' : 'Ajouter' }}
	</button>
	{% include "partials/elements/_button_return.html.twig" with { class: 'danger-button-style' } %}
</div>
{{ form_end(form) }}