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

{% block body %}
	<div class="max-w-7xl mx-auto mt-8">
		<div class="bg-neutral-tertiary border rounded-base shadow-sm p-6">
			<div class="mb-6">
				<h1 class="text-2xl font-semibold text-heading">
					Aperçu de l'import
				</h1>

				<p class="mt-2 text-sm text-body">
					Fichier :
					<span class="font-medium text-body-subtle">
						{{ batch.filename }}
					</span>
				</p>
			</div>

			<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
				<table class="w-full text-sm text-left rtl:text-right text-body">
					<thead class="text-sm text-body bg-neutral-secondary-soft border-b rounded-base border-default">
						<tr>
							<th scope="col" class="px-6 py-3 font-medium">
								Date
							</th>
							<th scope="col" class="px-6 py-3 font-medium">
								Libellé
							</th>
							<th scope="col" class="px-6 py-3 font-medium">
								Mémo
							</th>
							<th scope="col" class="px-6 py-3 font-medium text-right">
								Montant
							</th>
							<th scope="col" class="px-6 py-3 font-medium">
								Correspondance
							</th>
						</tr>
					</thead>

					{% for transaction in batch.importedTransactions %}
						{{ component('Import:ImportedTransactionComponent', { transactionId: transaction.id, key: transaction.id }) }}
					{% else %}
						<tbody>
							<tr>
								<td colspan="5" class="px-4 py-6 text-center text-gray-500">
									Aucune transaction trouvée dans ce fichier.
								</td>
							</tr>
						</tbody>
					{% endfor %}
				</table>
			</div>

			<form method="post" action="{{ path('import_validate', {id: batch.id}) }}">
				<div class="flex justify-end mt-6">
					<div class="flex items-center gap-4">
						{% include "partials/elements/_button_return.html.twig" with { class: 'return-button-style' } %}

						<button type="submit" class="button-style success-button-style">
							Valider l'import
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
{% endblock %}