{% extends '_modal.html' %}
{% load i18n %}
{% load static %}

{% block modal_class %}modal-lg{% endblock %}
{% block modal_id %}asset_list_modal{% endblock %}
{% block modal_title%}{% trans "Asset list" %}{% endblock %}
{% block modal_body %}
<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>
<script src="{% static 'js/jquery.form.min.js' %}"></script>
<style>
.inmodal .modal-header {
    padding: 10px 10px;
    text-align: center;
}

#assetTree2.ztree * {
    background-color: #f8fafb;
}
#assetTree2.ztree {
    background-color: #f8fafb;
}
</style>

<div class="wrapper wrapper-content">
   <div class="row">
       <div class="col-lg-3" id="split-left" style="padding-left: 3px">
           <div class="ibox float-e-margins">
               <div class="ibox-content mailbox-content" style="padding-top: 0;padding-left: 1px">
                   <div class="file-manager ">
                       <div id="assetTree2" class="ztree">
                       </div>
                       <div class="clearfix"></div>
                   </div>
               </div>
           </div>
       </div>
       <div class="col-lg-9 animated fadeInRight" id="split-right">
           <div class="mail-box-header">
               <table class="table table-striped table-bordered table-hover " id="asset_list_modal_table" style="width: 100%">
                   <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>
                       </tr>
                   </thead>
                   <tbody>
                   </tbody>
               </table>
           </div>
       </div>
   </div>
</div>

<script>
var zTree2, asset_table2 = 0;
function initTable2() {
    var options = {
        ele: $('#asset_list_modal_table'),
        ajax_url: '{% url "api-assets:asset-list" %}?show_current_asset=1',
        columns: [
            {data: "id"}, {data: "hostname" }, {data: "ip" }
        ],
        pageLength: 10
    };
    asset_table2 = jumpserver.initServerSideDataTable(options);
    return asset_table2
}

function onSelected2(event, treeNode) {
    var url = asset_table2.ajax.url();
    url = setUrlParam(url, "node_id", treeNode.node_id);
    setCookie('node_selected', treeNode.id);
    asset_table2.ajax.url(url);
    asset_table2.ajax.reload();
}


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

    var zNodes = [];
    $.get("{% url 'api-assets:node-list' %}", function(data, status){
        $.each(data, function (index, value) {
            value["node_id"] = value["id"];
            value["id"] = value["tree_id"];
            value["pId"] = value["tree_parent"];
            {#value["open"] = true;#}
            if (value["key"] === "0") {
                value["open"] = true;
            }
            value["name"] = value["value"] + ' (' + value['assets_amount'] + ')';
        });
        zNodes = data;
        $.fn.zTree.init($("#assetTree2"), setting, zNodes);
        zTree2 = $.fn.zTree.getZTreeObj("assetTree2");
        var root = zTree2.getNodes()[0];
        zTree2.expandNode(root);
    });
}


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

{% block modal_button %}
    {{ block.super }}
{% endblock %}
{% block modal_confirm_id %}btn_asset_modal_confirm{% endblock %}



