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

{% block pagewrapper %}
    {% set color = app.session.get('color') %}

    <h1 class="page-title">
        Gestion des Signataires de Chartes
    </h1>

    <p>
        <a class="btn btn-secondary" href="{{ path('app_portal_config_notice') }}">Annuler</a>
        
        <a href={{ path('app_portal_config_notice_users_deleteall',{'id':notice.id}) }}
            class="btn btn-danger float-end">
            Supprimer toutes les signatures
        </a>
    </p>

    <div class="card">
        <div class="card-header">
            <i class="fa fa-table fa-fw"></i> Liste des Signatures
        </div>

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

                    {% for user in notice.users %}
                        {% set colorbody = "background-color: #" ~ color['main'] %}
                            <tr>
                                <td>
                                    <a href="{{ path('app_portal_config_notice_users_delete',{id:notice.id,userid:user.id}) }}" data-method='delete' title='Supprimer'><i class='fa fa-trash fa-fw fa-2x'></i></a>
                                </td>
                                <td><img src="{{ asset('uploads/avatar/' ~ user.avatar) }}" class="avatar" style="margin:auto;display:block;"></td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.lastname }}</td>
                                <td>{{ user.firstname }}</td>
                            </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        table = $('#dataTables').DataTable({
            columnDefs: [ { "targets": 'no-sort', "orderable": false } ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 2, "asc" ]],
            drawCallback: function(settings) {
                $("a[data-method='delete']").click(function(){
                    if( !confirm('Êtes-vous sûr de vouloir supprimer ce calendrier ?')) {
                        return false;
                    }        
                });               
            }              
        });

    });
{% endblock %}


