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

{% block body %}
	<div class="min-h-screen max-h-fit pt-10 md:pt-14 pb-5 md:pb-10 md:ml-52">

		<div class="flex px-2 pt-2 gap-2 md:gap-4 flex-row items-center">
			<div class="bg-zpb-beige flex items-center rounded-sm p-1 gap-1 w-32 pl-2">
				<span class="underline font-bold">Espèces :</span>
				<span>{{totalSpecies}}</span>
			</div>
			<button data-collapse-toggle="filter-species" type="button" class="btn-zpb p-0 inline-flex items-center w-8 h-8 justify-center text-sm md:hidden focus:outline-hidden focus:ring-0" aria-controls="navbar-user" aria-expanded="false">
				{{ ux_icon('lsicon:filter-outline', {class: "w-5 h-5"}) }}
			</button>

			{% include "front/species/index/partials/_filter.html.twig" %}
		</div>

		{% if totalPages > 1 %}
			{% include "front/species/index/partials/_pagination.html.twig" %}
		{% endif %}

		{% include "front/species/index/partials/_species_list.html.twig" with {'allSpecies': allSpecies} %}

		{% if totalPages > 1 %}
			{% include "front/species/index/partials/_pagination.html.twig" %}
		{% endif %}
	</div>
	<script type="module" src="{{asset('/js/SpeciesPaginator.js')}}"></script>
{% endblock %}