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

{% block title %}Les zones
{% endblock %}

{% block body %}
	<div class="p-2 md:p-4 md:ml-52 h-full mt-10 md:mt-14 flex flex-col">
		<h1 class="py-2 rounded-lg text-center text-xl md:text-2xl">Les zones du parc</h1>
		<div class="flex flex-wrap mt-2">
			{% for zone in allZones %}
				{% if zone.name != "Inconnu" %}
					<div class="px-0 py-1 md:py-2 md:px-2 w-full md:w-1/3">
						<div class="flex flex-col bg-zpb-yellowLight rounded-md group">
							<details class="list-none">
								<summary class="list-none cursor-pointer shadow-lg text-lg md:text-xl rounded-md p-1 md:p-3 text-center border-b-4 border-zpb-darkBlue text-anthracite font-medium" style="background-color: {{ zone.color }}">
									{{zone.name}}
								</summary>
								<div class="p-2 text-sm md:text-base">
									<div class="flex gap-1">
										<p>Ouverture de la zone en</p>
										<strong>{{zone.year|date('Y')}}</strong>
									</div>
									<p>
										<strong class="underline">Description :</strong>
										{{zone.description}}
									</p>
									<p>
										<strong class="underline">Nombre de territoires :</strong>
										{{zone.locations|length}}
									</p>
								</div>
							</details>
							<a href="{{path('locations', {name: zone.name})}}" class="btn-zpb text-center w-1/2 mx-auto my-2">
								<button>Voir</button>
							</a>
						</div>
					</div>
				{% endif %}
			{% endfor %}
		</div>
	</div>

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