
<div class="container-fluid dashboard-content">
    <!-- Header -->
    {% set title = "Users List" %}
    {% set navigation = [('Admin', ''), ('Users', '')] %}
    {% include 'include_header.html' %}

    <!-- table row -->
    <div class="row">
        <div class="col-12 text-sm-right mb-3">
            <a href="javascript:showRegisterUser()" class="btn btn-primary"><i class="fas fa-plus-circle"></i> Register New User</a>
        </div>
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="users-table" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>image</th>
                                <th>status</th>
                                <th>username</th>
                                <th>email</th>
                                <th>name</th>
                                <th>roles
                                <th>pi_id</th>
                                <th>applications</th>
                                <th>extra</th>
                                <th>actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for user in users %}
                            <tr>
                                <td>{{ user.id }}</td>
                                <td><a href="javascript:showUser({{ user.id }})"><img width="50px" src="{{ user.image }}"></a></td>
                                <td>{{ user.status }}</td>
                                <td>{{ user.username }}</td>
                                <td>{{ user.email }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.roles }}</td>
                                <td>{{ user.pi_id}}</td>
                                <td>{{ user.project_codes}}</td>
                                <td>
                                    <div style="max-width: 300px; overflow: auto">
                                        {{ user.extra }}
                                    </div>

                                </td>
                                <td>
                                    {% if current_user.is_manager %}
                                        <button class="btn btn-sm btn-outline-light" onclick="showUser({{ user.id }})"><i class="far fa-edit"></i></button>
                                        <button class="btn btn-sm btn-outline-light" onclick="deleteUser({{ user.id }})"><i class="far fa-trash-alt"></i></button>
                                    {% endif %}


                                    {% if current_user.is_admin %}
                                        <button class="btn btn-sm btn-outline-light"
                                                onclick="switchUser('{{ user.username }}', '{{ user.name }}')">
                                            <i class="fas fa-user-secret"></i>
                                        </button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end table row -->

</div>


<script>
    $('#users-table').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });

    function switchUser(username, name) {
        confirm("Switch User", "Do you want to switch as user: " + name + " ?",
            "No", "Yes",
            function () { doSwitch(username); })
    }

    function doSwitch(username) {
        var ajaxContent = $.ajax({
            url: "{{ url_for('do_switch_login') }}",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({'username': username}),
            dataType: "json"
        });

        ajaxContent.done(function(jsonResponse) {
            if ('user' in jsonResponse) {
                window.location.href = "{{ url_for('main', content_id='dashboard')}}";
            }
            else if ('error' in jsonResponse) {
                showError(jsonResponse.error);
            }
        });

        ajaxContent.fail(function(jqXHR, textStatus) {
            showError(textStatus );
        });

    }


</script>