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

{% block title %}
	{{nameZone}}
{% 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="relative py-2 rounded-lg text-center text-xl md:text-2xl">
			{{nameZone ~ " - les territoires"}}
			<a href="{{path('zones', {name: nameZone})}}" class="text-zpb-darkBlue bg-zpb-yellow absolute max-sm:text-xs -left-1 max-sm:-top-1 md:left-2 rounded-full p-1">{{ ux_icon('ion:return-up-back') }}</a>
		</h1>
		<div class="flex flex-wrap mt-2">
			{% for location in allLocations %}
				<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: {{ location.zone.color }}">
								{{location.name}}
							</summary>
							<div class="p-2 text-sm md:text-base">
								<div class="flex gap-1">
									<p>Ouverture du territoire en</p>
									<strong>{{location.creation|format_datetime(locale='fr',pattern='MMMM Y')}}</strong>
								</div>
								<p>
									<strong class="underline">Description :</strong>
									{{location.description}}
								</p>
								<p>
									<strong class="underline">Nombre d'enclos :</strong>
									{{location.enclosures|filter(enclosure=>enclosure.destruction == null and enclosure.name != "Inconnu")|length}}
								</p>
							</div>
						</details>
						<a href="{{path('enclosures', {name: location.name})}}" class="btn-zpb text-center w-1/2 mx-auto my-2">
							<button>Voir</button>
						</a>
					</div>
				</div>
			{% endfor %}
		</div>
	</div>

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