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

{% block title %}
	{{species.name}}
	-
	{{pageName}}
{% endblock %}

{% block sidebar %}
	{% include "front/species/partials/_sidebar-species.html.twig" with {'active': activePage} %}
{% endblock %}

{% block body %}
	<div class="min-h-screen max-h-fit pt-10 md:pt-14 pb-5 md:pb-10 md:ml-64 text-zpb-beige">
		<div class="flex flex-col gap-1 p-1 md:p-2">
			<div class="flex flex-col">
				<h2 class="text-lg md:text-xl font-bold">{{title}}</h2>
				<hr class="border-t-4 border-double border-zpb-beige w-4/5"/>
			</div>
			<div class="flex flex-col md:flex-row max-sm:justify-between gap-1 md:gap-2 mt-1">
				<div class="flex flex-wrap md:flex-row gap-1 md:gap-2 text-sm md:text-base">
					{% if activePage == 'youngs' %}
						<span class="rounded-sm flex gap-1 bg-zpb-beige items-center text-anthracite py-1 px-2 w-fit">
							<p class="uppercase">Total :</p>
							<strong>{{countCurrentsFellows.total + countLeavesFellows.total}}</strong>
						</span>
					{% endif %}
					<span class="rounded-sm flex gap-1 bg-zpb-beige items-center text-anthracite py-1 px-2 w-fit">
						<p>Actuels :</p>
						<strong>{{countCurrentsFellows.total}}</strong>
						(<p class="flex items-center gap-1 text-light-male">{{countCurrentsFellows.males}}
							{{ ux_icon('fa6-solid:mars', {class: "w-4 h-4"}) }}</p>
						.
						<p class="flex items-center gap-1 text-light-female">{{countCurrentsFellows.females}}
							{{ ux_icon('fa6-solid:venus', {class: "w-4 h-4"}) }}</p>
						.
						<p class="flex items-center gap-1 text-light-inconnu">{{countCurrentsFellows.inconnus}}
							{{ ux_icon('fa6-solid:venus-mars', {class: "w-4 h-4"}) }}</p>)
					</span>

					<span class="rounded-sm flex gap-1 bg-zpb-beige items-center text-anthracite py-1 px-2 w-fit">
						<p>Partis :</p>
						<strong>{{countLeavesFellows.total}}</strong>
						(<p class="flex items-center gap-1 text-dark-transfert">{{countLeavesFellows.transfert}}
							{{ ux_icon('majesticons:door-exit-line', {class: "w-4 h-4"}) }}
						</p>
						.
						<p class="flex items-center gap-1 text-dark-death">{{countLeavesFellows.décès}}
							{{ ux_icon('ph:cross-fill', {class: "w-4 h-4"}) }}
						</p>
						.
						<p class="flex items-center gap-1 text-dark-disappearance">{{countLeavesFellows.disparition}}
							{{ ux_icon('fluent:question-20-filled', {class: "w-4 h-4"}) }}
						</p>)
					</span>

					<button data-collapse-toggle="filter-fellows" 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/fellows/partials/_filter.html.twig" with {"species": species, routeName: routeName} %}

					<button class="btn-zpb flex gap-1.5 items-center" data-modal-target="modal-add-fellow" data-modal-toggle="modal-add-fellow">
						{{ ux_icon('basil:plus-outline', {class: "w-5 h-5"}) }}
						<span class="hidden md:block">
							Ajouter un individu
						</span>
					</button>
					{% include 'partials/_modal.html.twig' with {
						modalId: "modal-add-fellow",
						modalTitle: "Ajouter un individu",
						modalBody: component('add_fellow', {species: species, type: type}),
					} %}
				</div>

			</div>

			<div class="flex flex-wrap overflow-y-auto">
				{% for fellow in fellows %}
					{{ component('card_fellow', {fellow: fellow}) }}
				{% else %}
					<div>{{messageEmpty}}</div>
				{% endfor %}
			</div>
		</div>
	</div>

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