{% extends '_base_list.html' %}
{% load i18n static %}
{% block table_search %}
    {% include '_csv_import_export.html' %}
{% endblock %}
{% block table_container %}
<div class="pull-left m-r-5"><a href="{% url 'users:user-group-create' %}" class="btn btn-sm btn-primary ">{% trans "Create user group" %}</a></div>
<table class="table table-striped table-bordered table-hover " id="group_list_table" >
    <thead>
        <tr>
            <th class="text-center">
                <input id="" type="checkbox" class="ipt_check_all">
            </th>
            <th class="text-center">{% trans 'Name' %}</th>
            <th class="text-center">{% trans 'User' %}</th>
            <th class="text-center">{% trans 'Comment' %}</th>
            <th class="text-center">{% trans 'Action' %}</th>
        </tr>
    </thead>
</table>
{% endblock %}

{% block content_bottom_left %}{% endblock %}
{% block custom_foot_js %}
<script>
var groupsTable = 0;
var usersAmountTpl = '<a class="group-users-amount" data-uid="ID">NUM</a>';
function initTable() {
    var options = {
        ele: $('#group_list_table'),
        buttons: [],
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                cellData = htmlEscape(cellData);
                var detail_btn = '<a href="{% url "users:user-group-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                $(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
             }},
            {targets: 2, createdCell: function (td, cellData, rowData) {
                var data = usersAmountTpl
                    .replace("ID", rowData.id)
                    .replace('NUM', cellData);
                $(td).html(data);
             }},
            {targets: 3, createdCell: function (td, cellData) {
                cellData = htmlEscape(cellData);
                var innerHtml = cellData.length > 30 ? cellData.substring(0, 30) + '...': cellData;
                $(td).html('<span href="javascript:void(0);" data-toggle="tooltip" title="' + cellData + '">' + innerHtml + '</span>');
            }},
            {targets: 4, createdCell: function (td, cellData, rowData) {
                var name = htmlEscape(rowData.name);
                var update_btn = '<a href="{% url "users:user-group-update" pk=DEFAULT_PK %}" class="btn btn-xs btn-info">{% trans "Update" %}</a>'
                        .replace('{{ DEFAULT_PK }}', cellData);
                var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn_delete_user_group" data-gid="{{ DEFAULT_PK }}" data-name="99991938">{% trans "Delete" %}</a>'
                        .replace('{{ DEFAULT_PK }}', cellData)
                        .replace('99991938', name);
                if (rowData.id === 1) {
                    $(td).html(update_btn)
                } else {
                    $(td).html(update_btn + del_btn)
                }
            }}
        ],
        ajax_url: '{% url "api-users:user-group-list" %}',
        columns: [{data: "id"}, {data: "name" }, {data: "users_amount", orderable: false},
                  {data: "comment"}, {data: "id", orderable: false, width: "120px"}],
        op_html: $('#actions').html()
    };
    groupsTable = jumpserver.initServerSideDataTable(options);
    return groupsTable
}

var usersGroupsRelationUrl = "{% url 'api-users:users-groups-relation-list' %}";

function getGroupUsers(groupId, callback) {
    var theUrl = setUrlParam(usersGroupsRelationUrl, "usergroup", groupId);
    if (!callback) {
        callback = function (data) {
            console.log(data)
        }
    }
    requestApi({
        url: theUrl,
        method: "GET",
        success: callback,
        flash_message: false,
    })
}
$(document).ready(function() {
    groupsTable = initTable();
    initCsvImportExport(groupsTable, "{% trans 'User groups' %}")
}).on('click', '.btn_delete_user_group', function(){
    var $this = $(this);
    var group_id = $this.data('gid');
    var name = $this.data('name');
    var the_url = "{% url 'api-users:user-group-detail' pk=DEFAULT_PK %}".replace('{{ DEFAULT_PK }}', group_id);
    objectDelete($this, name, the_url)
})
.on('click', '.group-users-amount', function () {
    var $this = $(this);
    var groupId = $(this).data("uid");
    getGroupUsers(groupId, function (data) {
        var groups = [];
        data.forEach(function (v) {
            groups.push(v.user_display);
        });
        var popover = createPopover(groups);
        $this.parent().html(popover);
        $(popover).trigger('click');
    })
});
</script>
{% endblock %}
