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

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

{% block content %}
	<div>
		<div class="flex flex-col md:flex-row md:justify-between">
			<h1 class="text-2xl md:text-3xl font-bold mb-4">🐴 Mes Chevaux</h1>

			<a href="{{ path('app_horse_add') }}" class="button-style button-blue">
				➕ Ajouter un cheval
			</a>
		</div>

		<div class="grid md:grid-cols-3 gap-6 mt-2 md:mt-0">
			{% for horse in horses %}
				<div class="bg-white p-4 shadow-lg rounded-xl">
					<img src="{{ asset('images/horses/' ~ horse.photo) }}" alt="{{ horse.name }}" class="w-full aspect-video object-cover rounded-md">
					<h2 class="text-lg md:text-xl font-bold mt-2">{{ horse.name }}</h2>
					<p class="text-gray-600">{{ horse.breed }}
					</p>

					<div class="w-full flex justify-evenly mt-3">
						<a href="{{ path('app_horse_show', {name: horse.name}) }}" class="button-style button-blue">
							👀 Voir
						</a>
						<a href="{{ path('app_horse_edit', { name: horse.name }) }}" class="button-style button-yellow">
							✏️ Modifier
						</a>
					</div>
				</div>
			{% else %}
				<p>Aucun cheval enregistré.</p>
			{% endfor %}
		</div>
	</div>
{% endblock %}