{% extends 'front.html.twig' %}
{% block title %}  Annuaire {% endblock %}
{% block body %}

    <link rel="stylesheet" href="{{ asset('assets/css/styleannuaire.css') }}">
    <!-- Start Main Banner -->
    <div class="page-title">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <h3>Annuaire </h3>
                            <ul>
                                <li><a href="">Home</a></li>
                                <li>/</li>
                                <li class="active">Annuaire </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Main Banner -->
    <div class="container-fluid container-fullw bg-white">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br>
                    <div class="section-title">
                        <h3>Annuaire</h3>
                    </div>
                    <br>
                    <!-- end modal -->
                    <table class="table table-striped table-bordered table-hover table-full-width" id="myTable">
                        <thead>
                        <tr>

                            <td> Nom</td>
                            <td> Prenom</td>
                            <td> Specialite</td>
                            <td> Grade</td>
                            <td> Service</td>
                            <td> Adresse</td>
                            <td> Telephone</td>
                            <td> Email</td>
                        </tr>
                        </thead>
                        <tbody>

                        {% for adherant in adherants %}
                            <tr>
                                <td>{{ adherant.nom }}</td>
                                <td>{{ adherant.prenom }}</td>
                                <td>{{ adherant.specialite }}</td>
                                <td>{{ adherant.grade }}</td>
                                <td>{{ adherant.service }}</td>
                                <td>{{ adherant.adresse }}</td>
                                <td>{{ adherant.telephone }}</td>
                                <td>{{ adherant.email }}</td>

                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <br/><br/><br/>
                </div>
            </div>
        </div>
    </div>

    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
    <script>
        $(document).ready(function () {
            $.noConflict();
            $('#myTable').dataTable({

                dom: 'Bfrtip',
                buttons: [
                    {extend: 'excel', text: 'Télécharger Annuaire'},
                    {extend: 'pdf', text: 'Télécharger PDF'}
                ],
                language: { search: "" },
            });
            $('#myTable_filter').css('float', 'right');

            $('.buttons-excel').addClass(' btn-success btn-sm');
            $('.buttons-pdf').addClass(' btn-danger btn-sm');
            $("[aria-controls*='myTable']").attr("placeholder", "search");
        });

    </script>

{% endblock %}