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

{% block css %}
    <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
{% endblock %}

{% block title %}Liste des signataires{% endblock %}

{% block body %}

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table id="collaborateurs" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Nom</th>
                            <th>Statut</th>
                            <th>Email</th>
                            <th>Tel</th>
                            <th>Photo</th>
                            <th>Avatar</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for employe in employes %}
                        <tr>
                            <td><a href="{{ path('app_employe_edit', {'id': employe.id}) }}">{{ employe.id }}</a></td>
                            <td><a href="{{ path('app_employe_edit', {'id': employe.id}) }}">{{ employe.nom|upper }} {{ employe.prenom|capitalize }}</a></td>
                            <td>{{ getStatutLabel(employe.statut) }}</td>
                            <td>{{ employe.email }}</td>
                            <td>{{ employe.tel }}</td>
                            <td data-order="{{ employe.photo ? 1 : 0 }}"><i class="fas {{ employe.photo ? 'fa-check text-success' : 'fa-times text-danger' }}"></i></td>
                            <td data-order="{{ employe.avatar ? 1 : 0 }}"><i class="fas {{ employe.avatar ? 'fa-check text-success' : 'fa-times text-danger' }}"></i></td>
                            <td>
                                <a href="{{ path('app_employe_edit', {'id': employe.id}) }}"><i class="fas fa-edit"></i></a>&nbsp;&nbsp;
                                {{ include('employe/_delete_form.html.twig') }}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="8">Aucun employé enregistré</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <a href="{{ path('app_employe_new') }}" class="btn btn-primary"><i class="fas fa-plus"></i> Ajouter un signataire</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascript %}
    <script src="/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
        <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
        <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
        <script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
        <script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script>
        $(function () {
            $('#collaborateurs').DataTable({
                language: {
                    processing:     "Traitement en cours...",
                    search:         "Rechercher&nbsp;:",
                    lengthMenu:    "Afficher _MENU_ &eacute;l&eacute;ments",
                    info:           "_TOTAL_ signataire.s",
                    infoEmpty:      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix:    "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords:    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable:     "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first:      "Premier",
                        previous:   "Pr&eacute;c&eacute;dent",
                        next:       "Suivant",
                        last:       "Dernier"
                    },
                    aria: {
                        sortAscending:  ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                },
                "paging": true,
                "lengthChange": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>
{% endblock %}