{% set species = species ?? fellow.species %}

<div class="-mt-2 ml-5 border-l" style="color: {{species.class.colorText}}">
	<ul class="flex flex-col space-y-1 text-xs md:text-sm">
		<li>
			<a href="{{ path('species_synthesis', {'name': species.name}) }}" class="flex items-center gap-2 pl-2 py-2 rounded hover:bg-gray-700 {{ app.request.get('_route') == 'species_synthesis' ? 'bg-gray-700 font-semibold' : '' }}">
					{{ ux_icon('solar:chart-2-bold', {class: "w-4 md:w-5 h-4 md:h-5"}) }}
				Synthèse espèce
			</a>
		</li>
		<li>
			<a href="{{ path('species_fellows_allAdults', {'name': species.name}) }}" class="flex items-center gap-2 pl-2 py-2 rounded hover:bg-gray-700 {{ app.request.get('_route') == 'species_fellows_allAdults' ? 'bg-gray-700 font-semibold' : '' }}">
					{{ ux_icon('fa6-solid:person', {class: "w-4 md:w-5 h-4 md:h-5"}) }}
				Les adultes
			</a>
		</li>
		<li>
			<a href="{{ path('species_fellows_allYoungs', {'name': species.name}) }}" class="flex items-center gap-2 pl-2 py-2 rounded hover:bg-gray-700 {{ app.request.get('_route') == 'species_fellows_allYoungs' ? 'bg-gray-700 font-semibold' : '' }}">
					{{ ux_icon('fa:child', {class: "w-4 md:w-5 h-4 md:h-5"}) }}
				Les juvéniles
			</a>
		</li>
		<li>
			<a href="{{ path('species_allLocations', {'name': species.name}) }}" class="flex items-center gap-2 pl-2 py-2 rounded hover:bg-gray-700 {{ app.request.get('_route') == 'species_allLocations' ? 'bg-gray-700 font-semibold' : '' }}">
					{{ ux_icon('fa6-solid:map-location-dot', {class: "w-4 md:w-5 h-4 md:h-5"}) }}
				Les emplacements
				{# <span class="hidden md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide bg-zpb-yellow text-zpb-blue rounded-full">New</span> #}
			</a>
		</li>
	</ul>
	<hr class="mt-1">
</div>