{% extends 'base.html' %}
{% load bootstrap3 %}
{% load static %}
{% load i18n %}

{% block custom_head_css_js %}
    <link href="{% static 'css/plugins/ztree/awesomeStyle/awesome.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/plugins/ztree/jquery.ztree.all.min.js' %}"></script>
{% endblock %}
{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li>
                                <a href="{% url 'users:user-group-detail' pk=object.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'User group detail' %} </a>
                            </li>
                            <li  class="active">
                                <a href="{% url 'users:user-group-granted-asset' pk=object.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="col-lg-3" style="padding-left: 0px">
                           <div class="ibox float-e-margins">
                               <div class="ibox-content mailbox-content" style="padding-top: 0">
                                   <div class="file-manager ">
                                       <div id="assetTree" class="ztree">
                                       </div>

                                       <div class="clearfix"></div>
                                   </div>
                               </div>
                           </div>
                        </div>
                        <div class="col-lg-9 animated fadeInRight">
                            <div class="mail-box-header">
                                <table class="table table-striped table-bordered table-hover" id="user_assets_table" >
                                    <thead>
                                        <tr>
                                            <th class="text-center"><input type="checkbox" class="ipt_check_all"></th>
                                            <th class="text-center">{% trans 'Hostname' %}</th>
                                            <th class="text-center">{% trans 'IP' %}</th>
                                            <th class="text-center">{% trans 'Active' %}</th>
                                            <th class="text-center">{% trans 'Reachable' %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block custom_foot_js %}
<script>
var zTree;
var inited = false;
var url;
var asset_table;

function initTable() {
    if (inited){
        return asset_table
    } else {
        inited = true;
    }
    url = "{% url 'api-perms:user-group-assets' pk=object.id %}";
    var options = {
        ele: $('#user_assets_table'),
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                cellData = htmlEscape(cellData);
                {% url 'assets:asset-detail' pk=DEFAULT_PK as the_url  %}
                var detail_btn = '<a href="{{ the_url }}">' + cellData + '</a>';
                $(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
            }},
            {targets: 3, createdCell: function (td, cellData) {
                if (!cellData) {
                    $(td).html('<i class="fa fa-times text-danger"></i>')
                } else {
                    $(td).html('<i class="fa fa-check text-navy"></i>')
                }
            }},
            {targets: 4, createdCell: function (td, cellData) {
                var users = [];
                $.each(cellData, function (id, data) {
                    var name = htmlEscape(data.name);
                    users.push(name);
                });
                $(td).html(users.join(', '))
            }}
        ],
        ajax_url: url,
        columns: [
            {data: "id"}, {data: "hostname" }, {data: "ip" },
            {data: "is_active", orderable: false },
            {data: "system_users_granted", orderable: false}
        ]
    };
    asset_table = jumpserver.initDataTable(options);
    return asset_table
}


function onSelected(event, treeNode) {
    url = '{% url "api-perms:user-group-node-assets" pk=object.id node_id=DEFAULT_PK %}';
    var node_id = treeNode.meta.node.id;
    url = url.replace("{{ DEFAULT_PK }}", node_id);
    asset_table.ajax.url(url);
    asset_table.ajax.reload();
}


function selectQueryNode() {
    var query_node_id = $.getUrlParam("node");
    var cookie_node_id = getCookie('node_selected');
    var node;
    var node_id;

    if (query_node_id !== null) {
        node_id = query_node_id
    } else if (cookie_node_id !== null) {
        node_id = cookie_node_id;
    }

    node = zTree.getNodesByParam("id", node_id, null);
    if (node){
        zTree.selectNode(node[0]);
    }
}

function initTree() {
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onSelected: onSelected
        }
    };

    $.get("{% url 'api-perms:user-group-nodes-assets-as-tree' pk=object.id %}?show_assets=0", function(data, status) {
        $.fn.zTree.init($("#assetTree"), setting, data);
        zTree = $.fn.zTree.getZTreeObj("assetTree");
    });

}

$(document).ready(function () {
    initTree();
    initTable();
});
</script>
{% endblock %}
