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

{% block title %}
	{{location.name}}
{% endblock %}

{% block body %}
	<div class="p-2 md:p-4 md:ml-52 h-full mt-10 md:mt-14 flex flex-col gap-2 md:gap-4">

		<h1 class="relative py-2 rounded-lg text-center text-xl md:text-2xl">
			{{location.name}}
			<a href="{{path('locations', {name: location.zone.name})}}" 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-col bg-zpb-yellowLight rounded-md w-full">
			<details class="list-none" open>
				<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 }}">
					Détails du territoire
				</summary>
				<div class="flex flex-col md:flex-row">
					<div class="w-full md:w-2/3 p-1 md:p-4">
						<div>
							<img src="{{ location.plan ? asset('/uploads/locations/' ~ location.plan) : asset('/images/not-picture.jpg') }}" class="w-full md:w-2/3 mx-auto">
						</div>
					</div>
					<div class="p-2 text-sm md:text-base w-full md:w-1/3">
						<div>
							<p>Ouverture du territoire en
								<strong>{{location.creation|format_datetime(locale='fr',pattern='MMMM Y')}}</strong>
								{% if location.cost %}pour un coût de
									<strong>{{(location.cost/100)|number_format(0, '.', ' ')}}
										€</strong>
								{% endif %}
							</p>
						</div>
						{% if location.destruction %}
							<div class="flex gap-1">
								<p>Destruction du territoire en</p>
								<strong>{{location.destruction|format_datetime(locale='fr',pattern='MMMM Y')}}</strong>
							</div>
						{% endif %}
						{% if location.renovation %}
							<hr class="border-anthracite my-2 w-1/2">
							<div class="flex gap-1 flex-col">
								<strong class="underline">Travaux :</strong>
								<ul class="list-disc ml-5">
									{% for renovation in location.renovation|split('-') %}
										<li>{{ renovation }}</li>
									{% endfor %}
								</ul>
							</div>
						{% endif %}
					</div>
				</div>
			</details>
		</div>

		<div class="flex flex-wrap">
			<div class="w-full">
				<div class="flex flex-col bg-zpb-yellowLight rounded-md">
					<details class="list-none" open>
						<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 }}">
							Nombre d'enclos :
							{{location.enclosures|filter(enclosure=>enclosure.destruction == null and enclosure.name != "Inconnu")|length}}
						</summary>
						<div class="p-2 text-sm md:text-base flex flex-wrap">
							{% for enclosure in allEnclosures %}
								{% if enclosure.name != "Inconnu" %}
									<div class="p-1 w-full md:w-1/5">
										<div class="bg-zpb-blueLight rounded-md">
											<details>
												<summary class="bg-zpb-darkBlue text-zpb-yellowLight rounded-md list-none py-1 text-center cursor-pointer">{{enclosure.name}}
													-
													{{enclosure.species|length > 0 ? enclosure.species|length ~" espèce"~(enclosure.species|length > 1 ? "s" : "") : "vide"}}</summary>
												<div class="p-1 md:p-2">
													{% if enclosure.species|length == 0 %}
														<div>Cet enclos est vide</div>
													{% else %}
														{% for species in enclosure.species %}
															<a href="{{path('species_allLocations', {name: species.name})}}" class="flex items-center text-sm mb-2 last:mb-0 border rounded-md p-1" style="border-color: {{species.class.colorBackground}}; background-color: {{species.class.colorText}}">
																<div class="relative w-10 h-10 mr-3 rounded-full block">
																	{% if species.image %}
																		<img class="object-cover w-full h-full rounded-full" src="{{asset('/uploads/species/' ~ species.image)}}" alt="" loading="lazy"/>
																	{% else %}
																		<div class="w-full h-full rounded-full bg-zpb-blue text-zpb-yellow flex justify-center items-center text-lg">{{species.name|slice(0,1)|upper}}</div>
																	{% endif %}
																</div>
																<div>
																	<p class="font-semibold" style="color: {{species.class.colorBackground}}">{{species.name}}</p>
																	<p class="text-xs text-gray-800">{{species.scientificName|split('(')[0]}}</p>
																</div>
															</a>
														{% endfor %}
													{% endif %}
												</div>
											</details>
										</div>
									</div>
								{% endif %}
							{% endfor %}
						</div>
					</details>
				</div>
			</div>
		</div>
	</div>
{% endblock %}