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

{% block body %}
	<div class="p-4 md:ml-52 h-screen pt-20 flex gap-2 flex-col">
		<div class="relative flex-1 flex h-96 flex-col break-words min-w-0 rounded-2xl bg-sky-950 w-full max-w-full mx-auto border-2 border-sky-200">
			<div class="flex-auto block p-2 h-full">
				<div class="overflow-auto h-full flex flex-col justify-between">
					<div class="flex justify-center p-2 gap-2">
						<h4 class="uppercase font-body text-center text-zpb-beige text-xl">Tableau des naissances</h4>
						<button data-modal-target="default-modal" data-modal-toggle="default-modal" class="absolute top-2 right-2 text-zpb-beige border border-zpb-beige rounded-sm w-8 h-8 hover:bg-zpb-beige hover:text-anthracite flex justify-center items-center" type="button">
							{{ ux_icon('fa6-solid:filter') }}
						</button>
						{% if firstDate or secondDate or classe or order or family %}
							<a href="{{ path('births') }}">
								<button class="absolute top-2 right-12 text-zpb-beige border border-zpb-beige rounded-sm w-8 h-8 hover:bg-zpb-beige hover:text-anthracite flex justify-center items-center">
									{{ ux_icon('fa6-solid:filter-circle-xmark', {class: "text-red-500"}) }}
								</button>
							</a>
						{% endif %}
					</div>
					<div class="text-center text-zpb-beige my-2 absolute top-2 left-2">
						Total des naissances trouvées :
						{{ totalNumber|number_format(0, '.', ' ') }}
					</div>

					{# Tableau des naissances #}
					{% include "front/births/partials/_table.html.twig" %}

					{# Pagination #}
					{% include "front/births/partials/_pagination.html.twig" %}
				</div>
			</div>
		</div>

		{# Modale de filtration #}
		{% include "front/births/partials/_modal-filter.html.twig" %}
	</div>

	<script type="module" src="{{asset('/js/selectsByClasses.js')}}"></script>
{% endblock %}