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

{% block title %}ZPB Gestion - Vue du Zoo
{% endblock %}

{% block main %}
	<div class="p-3 md:p-6 space-y-4 md:space-y-6 mt-11 md:mt-14">
		<h1 class="text-lg md:text-xl font-semibold text-zpb-blue dark:text-zpb-blueLight mb-2 ml-2">Vue du Parc Zoologique</h1>
		<p class="text-sm md:text-base text-anthracite dark:text-zpb-beige">Sélectionnez une zone pour explorer ses territoires.</p>

		<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
			{% for zone in zones %}
				<a href="{{ path('app_zoo_zone', {'id': zone.id}) }}" class="h-fit p-4 rounded-lg shadow-md hover:shadow-xl border border-zpb-blue/30 dark:border-zpb-blueLight/30  hover:scale-[1.02] transition transform" style="background-color: {{ zone.color }};">
					<h2 class="text-base md:text-lg font-semibold text-anthracite">{{ zone.name }}</h2>
					<hr class="my-2 border-anthracite">
					<div class="text-sm text-anthracite spaces-y-1">
						<p>Ouverture en
							{{ zone.year|date('Y') }}</p>
						<p>{{ zone.description }}</p>
					</div>
					<hr class="my-2 border-anthracite">
					<p class="text-sm text-anthracite">
						{{ zone.locations|length }}
						territoire{{ zone.locations|length > 1 ? 's' : '' }}
						:</p>
					<div class="mt-3 flex flex-wrap gap-2">
						{% for loc in zone.locations %}
							<span class="px-2 py-1 bg-zpb-beige/80 dark:bg-anthracite/80 text-anthracite dark:text-zpb-beige rounded-full text-xs">{{ loc.name }}</span>
						{% endfor %}
					</div>
				</a>
			{% endfor %}
		</div>
	</div>
{% endblock %}