{% extends 'base.html' %}
{% 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>
    <script src="{% static 'js/jquery.form.min.js' %}"></script>
{% endblock %}

{% block content %}
<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="assetTree" class="ztree">
                       </div>

                       <div class="clearfix"></div>
                   </div>
               </div>
           </div>
       </div>
       <div class="col-lg-9 animated fadeInRight" id="split-right">
           <div class="tree-toggle">
               <div class="btn btn-sm btn-primary tree-toggle-btn" onclick="toggle()">
                   <i class="fa fa-angle-left fa-x" id="toggle-icon"></i>
               </div>
           </div>
           <div class="mail-box-header">
               <div class="btn-group" style="float: right">
                   <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">{% trans 'Label' %} <span class="caret"></span></button>
                   <ul class="dropdown-menu labels">
                       {% for label in labels %}
                           <li><a style="font-weight: bolder">{{ label.name }}:{{ label.value }}</a></li>
                       {% endfor %}
                   </ul>
               </div>
               <table class="table table-striped table-bordered table-hover " id="user_assets_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>
                           <th class="text-center">{% trans 'Active' %}</th>
                           <th class="text-center">{% trans 'System users' %}</th>
                       </tr>
                   </thead>
                   <tbody>
                   </tbody>
               </table>
           </div>
       </div>
   </div>
</div>

{% include 'assets/_user_asset_detail_modal.html' %}
{% endblock %}


{% block custom_foot_js %}
<script>
var zTree, asset_table, show=0;
var inited = false;
var url;
function initTable() {
    if (inited){
        return
    } else {
        inited = true;
    }
    url = "{% url 'api-perms:my-assets' %}";
    var options = {
        ele: $('#user_assets_table'),
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                var detail_btn = '<a class="asset_detail" asset-id="rowData_id" data-toggle="modal" data-target="#user_asset_detail_modal" tabindex="0">'+ cellData +'</a>'
                $(td).html(detail_btn.replace("rowData_id", 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) {
                    users.push(data.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.initServerSideDataTable(options);
    return asset_table
}

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

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

    var zNodes = [];
    $.get("{% url 'api-perms:my-nodes-assets-as-tree' %}?show_assets=0", function(data, status){
        zNodes = data;
        $.fn.zTree.init($("#assetTree"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("assetTree");
    });
}

$(document).ready(function () {
    initTree();
    initTable();
})
.on('click', '.asset_detail', function() {
    var data = asset_table.ajax.json();
    var asset_id = this.getAttribute("asset-id");
    var trs = '';
    var desc = {
        'hostname': "{% trans 'Hostname' %}",
        'ip': "{% trans 'IP' %}",
        'port': "{% trans 'Port' %}",
        'protocol': "{% trans 'Protocol' %}",
        'platform': "{% trans 'Platform' %}",
        'os': "{% trans 'OS' %}",
        'system_users_join': "{% trans 'System user' %}",
        'domain': "{% trans 'Domain' %}",
        'is_active': "{% trans 'Is active' %}",
        'comment': "{% trans 'Comment' %}"
        {#'date_joined': "{% trans 'Date joined' %}",#}
    };
    $.each(data, function(index, value){
        if(value.id === asset_id){
            for(var i in desc){
                trs += "<tr class='no-borders-tr'>\n" +
                  "<td>"+ desc[i] + ":</td>"+
                  "<td><b>"+ (value[i] === null?'':value[i]) + "</b></td>\n" +
                  "</tr>";
            }
        }
    });
    $('#asset_detail_tbody').html(trs)
});

function toggle() {
    if (show === 0) {
        $("#split-left").hide(500, function () {
            $("#split-right").attr("class", "col-lg-12");
            $("#toggle-icon").attr("class", "fa fa-angle-right fa-x");
            show = 1;
        });
    } else {
        $("#split-right").attr("class", "col-lg-9");
        $("#toggle-icon").attr("class", "fa fa-angle-left fa-x");
        $("#split-left").show(500);
        show = 0;
    }
}

</script>

{% endblock %}