{% extends 'horse/show.html.twig' %}

{% block details %}
<div>
	<div class="flex gap-4 mt-2 flex-col md:flex-row">
		<div class="w-full md:w-1/3">
			<div>
				<a href="{{ path('app_measurements_add', { name: horse.name }) }}" class="button-style button-blue">
					➕ Ajouter une mesure
				</a>
			</div>
			{% if horse.measurements|length > 0 %}
				<div class="mt-2">
					{% include "horse/partials/_measurement_accordion.html.twig" %}
				</div>
			{% else %}
				<p class="text-stone-600">Aucune mesure enregistrée.</p>
			{% endif %}
		</div>
		<div class="w-full md:w-2/3">
			{% if chartMeasurements is defined %}
				<div class="aspect-video mx-auto">
					{{ render_chart(chartMeasurements) }}
				</div>
			{% else %}
				<p class="text-gray-600">Pas assez de données pour générer un graphique.</p>
			{% endif %}
		</div>
	</div>
</div>
{% endblock %}