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

{% block content %}
	<div class="max-w-4xl mx-auto md:mt-10 p-6 bg-white shadow-lg rounded-lg">
		<h1 class="text-2xl font-bold text-gray-800 mb-6">📊 Tableau de bord</h1>

		<!-- Statistiques -->
		<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
			<div class="p-4 bg-blue-100 rounded-md">
				<p class="text-lg font-semibold">Total chevaux</p>
				<p class="text-3xl font-bold">{{ totalHorses }}</p>
			</div>
			<div class="p-4 bg-green-100 rounded-md">
				<p class="text-lg font-semibold">Âge moyen</p>
				<p class="text-3xl font-bold">{{ averageAge }}
					ans</p>
			</div>
		</div>

		<!-- Liste des derniers chevaux -->
		<h2 class="text-xl font-bold mb-4">🐴 Derniers chevaux ajoutés</h2>
		<div class="bg-gray-100 p-4 rounded-md">
			{% if horses|length > 0 %}
				<ul class="space-y-2">
					{% for horse in horses|slice(0, 5) %}
						<li class="flex justify-between items-center p-2 bg-white shadow rounded-md">
							<div>
								<p class="text-lg font-semibold">{{ horse.name }}</p>
								<p class="text-sm text-gray-600">Âge :
									{{ (horse.birthDate).diff(date()).y }}
									ans et
									{{ (horse.birthDate).diff(date()).m }}
									mois</p>
							</div>
							<a href="{{ path('app_horse_show', { name: horse.name }) }}" class="button-style button-gray">👀 Voir</a>
						</li>
					{% endfor %}
				</ul>
			{% else %}
				<p class="text-gray-600">Aucun cheval ajouté pour le moment.</p>
			{% endif %}
		</div>

		<!-- Actions rapides -->
		<div class="mt-6 flex flex-col md:flex-row justify-between gap-2">
			<a href="{{ path('app_horse_add') }}" class="button-style button-green">
				➕ Ajouter un cheval
			</a>
			{% if horses|length > 0 %}
				<a href="{{ path('app_horses') }}" class="button-style button-blue">
					📜 Voir tous les chevaux
				</a>
			{% endif %}
		</div>
	</div>
{% endblock %}