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

{% block localstyle %}
    {%if access!="config" %}
    .page-header {
        padding: 0px 30px 100px 30px !important;
    }    
    {%endif%}
{% endblock %}

{% block pagewrapper %}
    <h1 class="page-title">Liste des Utilisateurs du groupe = {{group.label}}</h1>
    <h2>Groupe = {{ group.label }}</h2>

    <p>
        <a class="btn btn-secondary" href={{ path('app_core_'~access~'_group') }}>Revenir à la liste</a>
    </p>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Liste des Utilisateurs affectés au groupe
                </div>

                <div class="card-body">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover" id="dataTablesin" style="width:100%">
                            <thead>
                            <tr>
                                <th width="70px" class="no-sort">Avatar</th>
                                <th>Nom</th>
                                <th>Prénom</th>
                            </tr>
                            </thead>

                            <tbody>
                                {% for usermember in group.users %}
                                    <tr>
                                        <td class="text-center"><img src="{{asset("uploads/avatar/"~usermember.user.avatar)}}" class="avatar" style='width:30px;background-color:#337ab7;margin:auto;'></td>
                                        <td>{{usermember.user.lastname}}</td>
                                        <td>{{usermember.user.firstname}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $('#dataTablesin').DataTable({
            columnDefs: [ { "targets": 'no-sort', "orderable": false },{ "targets": 'no-visible', "visible": false } ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 2, "asc" ]],                          
        });

        
    });   
{% endblock %}
