{% extends 'admin/base_admin.html.twig' %}


{% block contentHeader %}
    <h1>
        Utilisateurs
        <small>Liste</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ path('admin_dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active">Utilisateurs</li>
    </ol>
{% endblock %}

{% block content %}

    <div class="box box-primary">
        <div class="box-body">
            <table id="user_list_table" class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th class="col-md-3">Email</th>
                    <th>Roles</th>
                    <th>Action</th>
                </tr>
                </thead>

                <tbody>
                {% for u in users %}
                    <tr>
                        <td>{{ u.lastname }}</td>
                        <td>{{ u.firstname }}</td>
                        <td>{{ u.email }}</td>
                        <td>
                            {% for r in u.roles %}
                                {% if r != "ROLE_USER" %}
                                    <span class="badge bg-blue" style="font-weight: 400;">{{ r }}</span>
                                {% endif %}
                            {% endfor %}
                        </td>
                        <td></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        $(function () {
            $('#user_list_table').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/French.json"
                },
                "columnDefs": [
                    {"targets": 0, "searchable": true, "orderable": true},
                    {"targets": 1, "searchable": true, "orderable": true},
                    {"targets": 2, "searchable": true, "orderable": true},
                    {"targets": 3, "searchable": true, "orderable": true, "className": "text-center"},
                    {"targets": 4, "searchable": false, "orderable": false, "className": "text-center"},
                ]
            });
        });
    </script>

{% endblock %}