{% extends '@CadolesCore/base.html.twig' %}

{% block pagewrapper %}
    <a class="btn btn-default" onClick="closeModal()">Fermer</a>

    <br><br>

    {% if not usersnotin is empty %}
        <h3>Les utilisateurs suivants existent déjà dans {{ app.session.get('appname') }}</h3>
        Pour les ajouter à votre groupe cliquez sur le symbole bleu “+” situé à gauche de leur nom<br>

        <div class="dataTable_wrapper">
            <table class="table table-striped table-bordered table-hover" id="dataTablesnotin" style="width:100%">
                <thead>
                <tr>
                    <th width="70px" class="no-sort">Action</th>
                    <th width="70px" class="no-sort">Avatar</th>
                    <th width="200px">Login</th>
                    <th>Email</th>  
                </tr>
                </thead>

                <tbody>
                    {% for user in usersnotin %}
                        <tr id="user{{user.id}}">
                            <td><a style='cursor:pointer' onClick='addUsers({{user.id}})'><i class='fa fa-plus fa-fw'></i></a></td>
                            <td><img onClick='seeUser({{user.id}})' src='/{{alias}}/uploads/avatar/{{user.avatar}}' style='width:30px;background-color:#337ab7;margin:auto;display:block;cursor:pointer;'></td>
                            <td>{{user.username}}</td>
                            <td>{{user.email}}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

    {% endif %}

    {% if not usersin is empty %}
        <h3>Les utilisateurs suivants déjà rattachés à votre groupe</h3>
        <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 width="200px">Login</th>
                    <th>Email</th>  
                </tr>
                </thead>

                <tbody>
                    {% for user in usersin %}
                        <tr>
                            <td><img onClick='seeUser({{user.id}})' src='/{{alias}}/uploads/avatar/{{user.avatar}}' style='width:30px;background-color:#337ab7;margin:auto;display:block;cursor:pointer;'></td>
                            <td>{{user.username}}</td>
                            <td>{{user.email}}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

    {% endif %}

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
    });

    function addUsers(userid) {
        $.ajax({
            rowId: 2,
            method: "POST",
            url: "{{ path('cadoles_core_user_group_ajax_usergroup_add') }}",
            data: "userid="+userid+"&groupid="+{{ group.id }},
            success: function(data, dataType)
            {
                var row=$("#dataTablesnotin").DataTable().row("#user"+userid);
                row.remove().draw(); 
            },

            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                
            }
        });         
    }

    function closeModal() {
        url=window.parent.location;
        window.parent.location=url;
    }

{% endblock %}