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

{% block title %}Mes chevaux
{% endblock %}

{% block content %}
	<div class="h-screen p-2 md:p-4 overflow-y-auto scroll-smooth">
		<div class="flex flex-col gap-2 md:gap-4 h-full">
			<div class="flex flex-row lg:justify-between max-sm:gap-2 items-center shrink-0 mx-10">
				<h1 class="text-xl md:text-3xl font-bold text-stone-800 dark:text-stone-200">
					Mes Chevaux
				</h1>
				<a href="{{ path('app_horse_add') }}" class="button-style button-add button-flex">
					{{ ux_icon('icon-park-outline:add-one', { 'class': 'w-5 h-5' }) }}
					<p class="max-sm:hidden">Ajouter</p>
				</a>
			</div>

			<div class="flex-1 overflow-y-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 pt-4 p-0 md:p-5">
				{% for horse in horses %}
					{% set isDead = horse.deathAt is not null %}
					<div class="group perspective h-fit flip-card">
						<div class="relative transition-transform duration-500 [transform-style:preserve-3d] w-full min-h-[300px] md:min-h-[350px] {{ isDead ? 'bg-gray-100 border-2 border-red-600 shadow-inner' : 'bg-white shadow-lg' }} p-3 sm:p-4 rounded-xl">
							<div class="absolute inset-0 shadow-lg p-4 rounded-xl [backface-visibility:hidden] flex flex-col justify-between">
								<button class="absolute top-2 right-2 z-10 button-pins button-view hover:rotate-180" onclick="this.closest('.flip-card').classList.toggle('flipped')">
									{{ ux_icon('subway:round-arrow-5', { 'class': 'w-5 h-5' }) }}
								</button>
								{% if horse.photo %}
									<img src="{{ asset('uploads/' ~ horse.user.id ~ '/photos/' ~ horse.photo) }}" alt="{{ horse.name }}" class="w-full aspect-video object-cover rounded-md {{ isDead ? 'grayscale' }}">
								{% else %}
									<img src="{{ asset('images/no-picture.png') }}" alt="{{ horse.name }}" class="w-full aspect-video object-contain rounded-md {{ isDead ? 'grayscale' }}">
								{% endif %}

								<div>
									<h2 class="text-lg sm:text-xl font-bold {{ isDead ? 'text-red-600 flex items-center gap-2' }}">
										{% if isDead %}†
										{% endif %}
										{{ horse.name }}
									</h2>

									<div class="flex flex-wrap gap-1 items-center text-sm sm:text-base">
										<p class="text-gray-500 italic">{{ horse.breed }}</p>
										{% if isDead %}
											<p class="text-gray-500">-</p>
											<p class="text-red-600">
												Décédé{{ horse.sex == "Jument" ? 'e' }}
												le
												{{ horse.deathAt|date('d/m/Y') }}
											</p>
										{% endif %}
									</div>
								</div>

								<div class="flex justify-center gap-3">
									<a href="{{ path('app_horse_show', {id: horse.id}) }}" class="button-style button-view button-flex">
										{{ ux_icon('tdesign:book-open', { 'class': 'w-5 h-5' }) }}
										Ouvrir la fiche du cheval
									</a>
									<a href="{{ path('app_horse_edit', {id: horse.id}) }}" class="button-style button-edit button-flex">
										{{ ux_icon('octicon:pencil-24', { 'class': 'w-5 h-5' }) }}
										Modifier
									</a>
								</div>
							</div>

							<div class="absolute inset-0 p-4 rounded-xl shadow-lg [backface-visibility:hidden] [transform:rotateY(180deg)] cursor-pointer" onclick="this.closest('.flip-card').classList.toggle('flipped')">
								<h2 class="text-lg sm:text-xl font-bold my-2 {{ isDead ? 'text-red-600 flex items-center gap-2' }}">
									{% if isDead %}†
									{% endif %}
									{{ horse.name }}
								</h2>
								<h3 class="font-semibold text-base md:text-lg text-gray-900 underline">Informations générales</h3>
								<ul class="list-disc list-inside space-y-1 text-sm">
									<li class="flex gap-2">
										<strong>Poids
											{{ horse.lastMeasurement('weight') ? 'au ' ~ horse.lastMeasurement('weight').date|date('d/m/Y')}}
											:</strong>
										<p>{{ horse.lastMeasurement('weight') ? horse.lastMeasurement('weight').weight ~ ' kg' : 'Aucun' }}</p>
									</li>
									<li class="flex gap-2">
										<strong>Taille
											{{ horse.lastMeasurement('height') ? 'au ' ~ horse.lastMeasurement('height').date|date('d/m/Y')}}
											:</strong>
										<p>{{ horse.lastMeasurement('height') ? horse.lastMeasurement('height').height ~ ' cm' : 'Aucune' }}</p>
									</li>
									<li class="flex gap-2">
										<strong>Dernière vaccination :</strong>
										<p>{{ horse.lastVaccination ? horse.lastVaccination.administeredAt|date('d/m/Y') : 'Aucune' }}</p>
									</li>
									<li class="flex gap-2">
										<strong>Dernière ferrure :</strong>
										<p>{{ horse.lastFarrierVisit ? horse.lastFarrierVisit.date|date('d/m/Y') : 'Aucune' }}</p>
									</li>
									<li class="flex gap-2">
										<strong>Dernière vermifugation :</strong>
										<p>{{ horse.lastDewormer ? horse.lastDewormer.administeredAt|date('d/m/Y') : 'Aucune' }}</p>
									</li>
									<li class="flex gap-2">
										<strong>Dernière visite dentiste :</strong>
										<p>{{ horse.lastDental ? horse.lastDental.date|date('d/m/Y') : 'Aucune' }}</p>
									</li>
									<li class="flex gap-2">
										<strong>Dernière visite ostéopathe :</strong>
										<p>{{ horse.lastOsteopathy ? horse.lastOsteopathy.date|date('d/m/Y') : 'Aucune' }}</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				{% else %}
					<p class="text-center text-white text-base">Aucun cheval enregistré.</p>
				{% endfor %}
			</div>
		</div>
	</div>
{% endblock %}