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

{% block details %}
	<div class="bg-white shadow rounded-xl p-4 md:p-6 flex flex-col gap-4 md:gap-6">
		<div class="flex flex-col md:flex-row md:justify-between gap-4">
			<div>
				<h1 class="text-lg md:text-xl font-bold text-stone-800">Suivi des maladies de
					{{ horse.name }}</h1>
				<p class="text-stone-600 mt-1 w-full md:w-2/3 text-sm md:text-base">
					Retrouvez ici l’historique et l’évolution des maladies de votre cheval. Chaque carte correspond à un suivi de maladie avec ses détails. Vous pouvez en ajouter de nouveaux pour un meilleur suivi vétérinaire.
				</p>
			</div>
			<div class="flex-1 flex justify-center">
				{{ component('disease_new', { horse: horse }) }}
			</div>
		</div>

		{{ component('diseases_list', { horse: horse }) }}
	</div>
{% endblock %}