{# On étend notre layout #}
{% extends "layout.html.twig" %}

{% block body %}
<div class="container">
	<div class="jumbotron jumbotron-fluid">
	  <div class="container">
		<h2 class="display-4">Gérer les groupes</h2>
	  </div>
	</div>
    <div class="">
		<div id="toolbar">
			<a href="{{ path('app_groupe_ajout') }}" class="btn btn-info" role="button">
				<i class="bi bi-plus" ></i>  Ajout
			</a>
		</div>
		<table class="table" data-toggle="table"
			   				data-toolbar="#toolbar"
							data-pagination="true" data-page-size="20" 
							data-search="true" data-trim-on-search="false"
							data-locale="fr-FR">
			<thead>
				<tr>
					<th>ID</th>
					<th width="60%">Nom</th>
					<th>Modifications</th>
				<tr>
			</thead>
			<tbody>
				{% for groupe in listGroupes %}
					<tr>
						<td>{{ groupe.id }}</td>
						<td >{{ groupe.nom }}</td>
						<td>
							<a class="btn-sm" href="{{ path('app_groupe_modifier', {'id': groupe.id}) }}" role="button">Modifier</a>
							<a class="btn-sm" href="{{ path('app_groupe_supprimer', {'id': groupe.id}) }}" role="button">Supprimer</a>
						</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
</div>

{% endblock %}