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

{% block title %}
	{{ parent() }}
	Animaux
{% endblock %}

{% block body %}
	<script src="https://cdn.tailwindcss.com"></script>

	<style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800 &display=swap');</style>

	<h1 class="h1titrepage">Liste des animaux</h1><br><br>

	<div style="display: flex; flex-wrap: wrap; gap: 20px;">
		{% for animal in animaux %}
			<div style="border: 1px solid #ccc; border-radius: 10px; padding: 15px; width: 250px;">
				<h2>{{ animal.nom }}</h2>
				<p>
					<strong>Date de naissance :</strong>
					{{ animal.dateNaissance|date('d/m/Y') }}</p>
				{% if animal.dateDeces %}
					<p>
						<strong>Date de décès :</strong>
						{{ animal.dateDeces|date('d/m/Y') }}</p>
				{% endif %}
				<p>
					<strong>Pays d’origine :</strong>
					{{ animal.paysOrigine }}</p>
				<p>{{ animal.description|length > 100 ? animal.description|slice(0, 100) ~ '...' : animal.description }}</p>
				<img src="{{ asset('image/animaux/' ~ animal.photo) }}" alt="{{ animal.nom }}" style="width: 100%; border-radius: 8px;">
			</div>
		{% else %}
			<p>Aucun animal trouvé.</p>
		{% endfor %}
	</div>
	<br><br>

{% endblock %}