{% set route = getRouteName() %}
{% extends '@ajax-layout/layout.twig' %}

{% block body %}
<form method="POST" id='formulaireEntity'>
	{% for key in listCarriedValue %}
	{# TODO : add support for depth (eg: titi[toto])#}
	<input type="hidden" name="{{ key }}" value="{{ post[ value ] }}" />
	{% endfor %}
	
	<table class="table">
		<thead class="thead-dark">
			<tr>
				<th>{{ triTable(primaryKey,  infoPagination.filter['tri_'~primaryKey], 'Code' | trad, 'formulaireEntity', path(route,{entity:entity}), 'formulaireEntity') }}</th>
				{% for col in listCol %}
				<th>{{ triTable(col.key,  infoPagination.filter['tri_'~col.key], col.label,'formulaireEntity', path(route,{entity:entity}), 'formulaireEntity') }}</th>
				{% endfor %}
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>{{ filterTable(primaryKey, infoPagination.filter['filter_'~primaryKey], '', 'formulaireEntity', path(route,{entity:entity}), 'formulaireEntity') }}</th>
				{% for col in listCol %}
				<th>{{ filterTable(col.key, infoPagination.filter['filter_'~col.key], '', 'formulaireEntity', path(route,{entity:entity}), 'formulaireEntity') }}</th>
				{% endfor %}
			</tr>
			{% for entity in listEntity %}
			
			<tr onclick='changeCodeLibelle({{ [
						post.divCode | json,
						entity[primaryKey] | json,
						post.divLibelle | json,
						entityLabel(entity, primaryKey, listCol[0].key) | json
					] | join(',') | e('html_attr') }});desactivePopup ()'
			>
				<td>{{ entity[primaryKey] }}</td>
				{% for col in listCol %}
				<td>{{ entity[ col.key ] }}</td>
				{% endfor %}
			</tr>
			{% endfor %}
		</tbody>
	</table>
	
	{# TODO : factorize pagination #}
	<nav aria-label="Page navigation">
		<ul class="pagination" id="pagination-zoom"></ul>
	</nav>
	<script>
		ajaxPagination("#pagination-zoom", "#formulaireEntity", {
			pageCount: {{ infoPagination.nombreDePage ?? 0 }},
			page: {{ infoPagination.page }},
			path: {{ path(route, {entity:entity}) | json }},
			postKey: 'page',
		}, function() {
			return new FormData(document.getElementById('formulaireEntity'));
		});
	</script>
</form>
{% endblock %}