{% extends 'base.html.twig' %}
{% block title %}Liste des contacts

{% endblock %}
{% block body %}
	<div class="wrapper-table">
		<h1>Liste des contacts</h1>
		<div class="container-boutons">
			<a href="{{path('contacts_creer-contact')}}" class="btn centered">
				<i class="fa-solid fa-circle-plus"></i>Créer un contact</a>

			{# Exporter les contacts en CSV par ordre alphabétique #}
			<a href="{{path('contacts_export-contacts-csv')}}" class="btn centered">
				<i class="fa-solid fa-file-csv"></i>Export CSV</a>
		</div>

		<div class="wrapper-contacts">
			<div class="container-boutons-alphabet">

				<a href="#" class="btn-lettre" id="btn-tous-contacts" data-lettre="Tous">Tous</a>
				<a href="{{path('contacts_liste',{lettre:"a"})}}" class="btn-lettre" data-lettre="a">A</a>
				<a href="{{path('contacts_liste',{lettre:'b'})}}" class="btn-lettre" data-lettre="b">B</a>
				<a href="{{path('contacts_liste',{lettre:'c'})}}" class="btn-lettre" data-lettre="c">C</a>
				<a href="{{path('contacts_liste',{lettre:'d'})}}" class="btn-lettre" data-lettre="d">D</a>
				<a href="{{path('contacts_liste',{lettre:'e'})}}" class="btn-lettre" data-lettre="e">E</a>
				<a href="{{path('contacts_liste',{lettre:'f'})}}" class="btn-lettre" data-lettre="f">F</a>
				<a href="{{path('contacts_liste',{lettre:'g'})}}" class="btn-lettre" data-lettre="g">G</a>
				<a href="{{path('contacts_liste',{lettre:'h'})}}" class="btn-lettre" data-lettre="h">H</a>
				<a href="{{path('contacts_liste',{lettre:'i'})}}" class="btn-lettre" data-lettre="i">I</a>
				<a href="{{path('contacts_liste',{lettre:'j'})}}" class="btn-lettre" data-lettre="j">J</a>
				<a href="{{path('contacts_liste',{lettre:'k'})}}" class="btn-lettre" data-lettre="k">K</a>
				<a href="{{path('contacts_liste',{lettre:'l'})}}" class="btn-lettre" data-lettre="l">L</a>
				<a href="{{path('contacts_liste',{lettre:'m'})}}" class="btn-lettre" data-lettre="m">M</a>
				<a href="{{path('contacts_liste',{lettre:'n'})}}" class="btn-lettre" data-lettre="n">N</a>
				<a href="{{path('contacts_liste',{lettre:'o'})}}" class="btn-lettre" data-lettre="o">O</a>
				<a href="{{path('contacts_liste',{lettre:'p'})}}" class="btn-lettre" data-lettre="p">P</a>
				<a href="{{path('contacts_liste',{lettre:'q'})}}" class="btn-lettre" data-lettre="q">Q</a>
				<a href="{{path('contacts_liste',{lettre:'r'})}}" class="btn-lettre" data-lettre="r">R</a>
				<a href="{{path('contacts_liste',{lettre:'s'})}}" class="btn-lettre" data-lettre="s">S</a>
				<a href="{{path('contacts_liste',{lettre:'t'})}}" class="btn-lettre" data-lettre="t">T</a>
				<a href="{{path('contacts_liste',{lettre:'u'})}}" class="btn-lettre" data-lettre="u">U</a>
				<a href="{{path('contacts_liste',{lettre:'v'})}}" class="btn-lettre" data-lettre="v">V</a>
				<a href="{{path('contacts_liste',{lettre:'w'})}}" class="btn-lettre" data-lettre="w">W</a>
				<a href="{{path('contacts_liste',{lettre:'x'})}}" class="btn-lettre" data-lettre="x">X</a>
				<a href="{{path('contacts_liste',{lettre:'y'})}}" class="btn-lettre" data-lettre="y">Y</a>
				<a href="{{path('contacts_liste',{lettre:'z'})}}" class="btn-lettre" data-lettre="z">Z</a>

			</div>
		</div>
		<div class="container-liste-contacts"></div>
	</div>
	{% block javascripts %}
		<script src="{{asset('assets/js/recherche-contact-alphabetique.js')}}" type="module" defer></script>
	{% endblock %}
{% endblock %}