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

{% block main %}
	{% set buttonBis = null %}
	{% if criteria.class or criteria.ordre or criteria.family or criteria.sex or criteria.type or criteria.dateFrom or criteria.dateTo or criteria.pending or criteria.sterilized or criteria.status %}
		{% set buttonBis %}
		<button class="btn-appli bg-purple-700 hover:bg-purple-800 text-white">
			<a href="{{ path('app_listing_fellows') }}">
				Réinitialiser
			</a>
		</button>
		{% endset %}
	{% endif %}

	<div class="flex flex-col md:flex-row gap-2 p-2 md:p-3 flex-1 h-[calc(100vh-4rem)] mt-14 overflow-auto">
		<div class="flex-1 flex flex-col">
			<div class="flex flex-col md:flex-row justify-between items-center mb-2 flex-shrink-0">
				<h2 class="text-lg md:text-xl font-bold text-zpb-blue dark:text-zpb-blueLight mb-1 md:mb-0">Liste des individus -
					{{ totalFellows|number_format('0', '', ' ') }}</h2>
				<div class="flex gap-2 md:hidden">
					<button data-modal-target="filter-modal" data-modal-toggle="filter-modal" class="bg-green-700 hover:bg-green-800 text-white px-4 py-2 rounded-lg shadow text-xs md:text-base">Filtres</button>
					{{ buttonBis|raw }}
				</div>
			</div>

			<div class="flex-1 custom-scrollbar overflow-y-auto flex flex-col">
				{% for fellow in fellows %}
					{{ component('card_fellow', {fellow: fellow}) }}
				{% else %}
					<p class="text-zinc-700 dark:text-zinc-300">Aucun individu n'a été trouvé.</p>
				{% endfor %}
			</div>

			{% if totalPages > 1 %}
				<div class="flex justify-center items-center gap-1 mt-2 mb-2 flex-wrap">

					{% if currentPage > 1 %}
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': 1})) }}" class="px-2 py-1 rounded border bg-white dark:bg-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-100">«</a>
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': currentPage - 1})) }}" class="px-2 py-1 rounded border bg-white dark:bg-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-100">‹</a>
					{% endif %}

					{% set start = max(1, currentPage - 2) %}
					{% set end = min(totalPages, currentPage + 2) %}

					{% if (end - start) < 4 %}
						{% if start == 1 %}
							{% set end = min(totalPages, start + 4) %}
						{% elseif end == totalPages %}
							{% set start = max(1, end - 4) %}
						{% endif %}
					{% endif %}

					{% if start > 1 %}
						<span class="px-2">...</span>
					{% endif %}

					{% for p in start..end %}
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}" class="px-3 py-1 rounded border transition-colors duration-150 {{ p == currentPage ? 'bg-green-600 text-white border-green-600' : 'bg-white dark:bg-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-100 dark:hover:bg-zinc-600' }}">
							{{ p }}
						</a>
					{% endfor %}

					{% if end < totalPages %}
						<span class="px-2">...</span>
					{% endif %}

					{% if currentPage < totalPages %}
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': currentPage + 1})) }}" class="px-2 py-1 rounded border bg-white dark:bg-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-100">›</a>
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': totalPages})) }}" class="px-2 py-1 rounded border bg-white dark:bg-zinc-700 text-gray-800 dark:text-zinc-100 hover:bg-gray-100">»</a>
					{% endif %}
				</div>
			{% endif %}
		</div>

		<div class="hidden md:block w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg flex-shrink-0 h-fit">
			<h3 class="text-lg uppercase font-bold text-zpb-blue dark:text-zpb-blueLight text-center border-b-2 border-zpb-blue dark:border-zpb-blueLight mb-1 p-2">Filtres</h3>
			{% include 'listing/fellows/partials/_filter.html.twig' with { 'buttonBis': buttonBis } %}
		</div>

		<div id="filter-modal" class="hidden fixed inset-0 z-50 flex items-start md:items-center justify-center overflow-y-auto bg-black/30 p-4">
			<div class="bg-white dark:bg-zinc-800 p-6 rounded-2xl w-full max-w-2xl shadow-lg">
				{% include 'listing/fellows/partials/_filter.html.twig' %}
			</div>
		</div>
	</div>
{% endblock %}