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

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

{% block content %}
	<div>
		<a href="{{ path('app_horses') }}" class="button-style button-gray">← Retour</a>

		<div class="bg-white p-3 md:p-6 shadow-lg rounded-xl mt-4 flex flex-col">
			<div class="flex flex-col md:flex-row gap-4">
				<div class="flex-none w-full md:w-1/4">
					<img src="{{ asset('images/horses/' ~ horse.photo) }}" alt="{{ horse.name }}" class="border-2 w-full aspect-video object-cover rounded-md">
				</div>
				<div class="flex-1 flex flex-col gap-0.5 md:gap-2">
					<h1 class="text-xl md:text-3xl font-bold">{{ horse.name }}</h1>
					<h2 class="text-lg md:text-xl font-semibold">{{ horse.father ~ " x " ~ horse.mother }}</h2>

					<p class="text-stone-600">{{ horse.breed }}
						-
						{{ horse.sex }}
						-
						{{ age }}
					</p>
					{% if lastHeight or lastWeight %}
						<div class="mt-4">
							<h3 class="text-xl font-bold">Suivis</h3>
							<ul class="list-disc list-inside">
								{% if lastWeight %}
									<li>{{ "Poids : " ~ lastWeight ~ " kg" }}</li>
								{% endif %}
								{% if lastHeight %}
									<li>{{ "Taille : " ~ lastHeight ~ " cm" }}</li>
								{% endif %}
							</ul>
						</div>
					{% endif %}
				</div>
			</div>

			<div class="mb-4 border-b border-gray-200">
				<ul class="flex flex-wrap mt-2 -mb-px text-sm font-medium text-center" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-emerald-600 hover:text-emerald-600 border-emerald-600" data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" role="tablist">
					<li class="me-2" role="presentation">
						<button class="cursor-pointer inline-block p-2 border-b-2 rounded-t-lg" id="infos-styled-tab" data-tabs-target="#styled-infos" type="button" role="tab" aria-controls="infos" aria-selected="false">Informations</button>
					</li>
					<li class="me-2" role="presentation">
						<button class="cursor-pointer inline-block p-2 border-b-2 rounded-t-lg" id="measurements-styled-tab" data-tabs-target="#styled-measurements" type="button" role="tab" aria-controls="measurements" aria-selected="false">Mensurations</button>
					</li>
					<li class="me-2" role="presentation">
						<button class="cursor-pointer inline-block p-2 border-b-2 rounded-t-lg" id="vaccines-styled-tab" data-tabs-target="#styled-vaccines" type="button" role="tab" aria-controls="vaccines" aria-selected="false">Vaccins</button>
					</li>
				</ul>
			</div>
			<div id="default-styled-tab-content">
				<div class="hidden p-4 rounded-lg bg-stone-200" id="styled-infos" role="tabpanel" aria-labelledby="infos-tab">
					{% include 'horse/partials/_infos.html.twig' %}
				</div>
				<div class="hidden p-4 rounded-lg bg-stone-200" id="styled-measurements" role="tabpanel" aria-labelledby="measurements-tab">
					{% include 'horse/partials/_measurement.html.twig' %}
				</div>
				<div class="hidden p-4 rounded-lg bg-stone-200" id="styled-vaccines" role="tabpanel" aria-labelledby="vaccines-tab">
					{% include 'horse/partials/_vaccines.html.twig' %}
				</div>
			</div>
		</div>
	</div>
{% endblock %}