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

{% block title %}Animaux index
{% endblock %}

{% block body %}
	<h1>Animaux index</h1>

	<table id="analyseTable" class="display">
		<thead>
			<tr>
				<th>Numero</th>
				<th>Couleur</th>
				<th>Nom</th>
				<th>Owner</th>
				<th>Type</th>
				<th>actions</th>
			</tr>
		</thead>
		<tbody>
			{% for animaux in animauxes %}
				<tr>
					<td>{{ animaux.numero }}</td>
					<td>{{ animaux.couleur }}</td>
					<td>{{ animaux.nom }}</td>
					<td>{{ animaux.owner }}</td>
					{% if animaux.type == "Feline" %}
						<td>{{ animaux.type }}
							-
							<i class="fa-solid fa-cat"></i>
						</td>
					{% elseif animaux.type == "Canine" %}
						<td>{{ animaux.type }}
							-
							<i class="fa-solid fa-dog"></i>
						</td>
					{% endif %}
					<td>
						<a href="{{ path('app_animaux_show', {'id': animaux.id}) }}">
							<i class="fa-solid fa-eye"></i>
						</a>
						<a href="{{ path('app_animaux_edit', {'id': animaux.id}) }}">
							<i class="fa-solid fa-pen"></i>
						</a>
					</td>
				</tr>
			{% else %}
				<tr>
					<td colspan="6">no records found</td>
				</tr>
			{% endfor %}
		</tbody>
	</table>

	<a href="{{ path('app_animaux_new') }}">Create new</a>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"/>

	<style>
		.in-range {
			color: green;
		}

		.out-of-range {
			color: red;
		}

		.no-limits {
			color: black;
		}
	</style>
	<script>
		$(document).ready(function () {
$('#analyseTable').DataTable({paging: true, searching: true, ordering: true, scrollX: true});
});
	</script>
{% endblock %}