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

{% block title %}ZPB Gestion -
	{{ zone.name }}
{% endblock %}

{% block main %}
	<div class="p-3 md:p-6 space-y-4 md:space-y-6 mt-10 md:mt-14">
		<div class="flex items-center justify-between">
			<h1 class="text-lg md:text-xl font-semibold text-zpb-blue dark:text-zpb-blueLight">{{ zone.name }}</h1>
			<a href="{{ path('app_zoo_zones') }}" class="btn-appli btn-return">Retour aux Zones</a>
		</div>

		<div class="flex justify-between items-center">
			<p class="text-sm md:text-base text-anthracite dark:text-zpb-beige">Choisissez un territoire à explorer.</p>
			<button type="button" class="btn-appli btn-zpb" onclick="window.dispatchEvent(new CustomEvent('modal:open', { detail: { id: 'modal-add-location' } }))">
				Ajouter un territoire
			</button>
		</div>

		<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
			{% for territoire in zone.locations %}
				<a href="{{ path('app_zoo_territoire', {'id': territoire.id}) }}" class="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl border border-zpb-blue/30 dark:border-zpb-blueLight/30 hover:scale-[1.02] transition transform flex flex-col gap-2">
					<div class="flex items-center justify-between">
						<h2 class="font-semibold text-base md:text-lg text-anthracite dark:text-zpb-beige">{{ territoire.name }}</h2>
						<i class="text-sm text-zinc-600 dark:text-zinc-400 bg-zinc-300 dark:bg-zinc-700 px-2 py-1 rounded">{{ territoire.creation|date('Y') }}</i>
					</div>
					<hr class="my-2 border-anthracite dark:border-zpb-beige">
					<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ territoire.description }}</p>
					<hr class="my-2 border-anthracite dark:border-zpb-beige">
					<p class="text-sm text-zinc-600 dark:text-zinc-400">
						{{ territoire.getEnclosuresWithoutDestruction|length }}
						enclos</p>
				</a>
			{% endfor %}
		</div>
	</div>

	{% include 'partials/_modal.html.twig' with {
		modalId: "modal-add-location",
		modalTitle: "Ajouter un territoire",
		modalBody: component('new_location'),
	} %}
{% endblock %}