{% 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() {
    if(asset_table2){
        return
    }

    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 onNodeSelected2(event, treeNode) {
    var url = asset_table2.ajax.url();
    url = setUrlParam(url, "node_id", treeNode.meta.node.id);
    url = setUrlParam(url, "show_current_asset", "");
    asset_table2.ajax.url(url);
    asset_table2.ajax.reload();
}


function initTree2() {
    var url = '{% url 'api-assets:node-children-tree' %}?assets=0';
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        async: {
			enable: true,
			url: url,
			autoParam: ["id=key", "name=n", "level=lv"],
            type: 'get'
		},
        callback: {
            onSelected: onNodeSelected2
        }
    };
    zTree2 = $.fn.zTree.init($("#assetTree2"), setting);
}


$(document).ready(function(){
}).on('show.bs.modal', function () {
    initTable2();
    initTree2();
})
</script>
{% endblock %}

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



