{% 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">
       {% include 'users/_granted_assets.html' %}
   </div>
</div>

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


{% block custom_foot_js %}
<script>
var treeUrl = "{% url 'api-perms:my-nodes-children-as-tree' %}?cache_policy=1";
var assetTableUrl = "{% url 'api-perms:my-assets' %}?cache_policy=1";
var selectUrl = '{% url "api-perms:my-node-assets" node_id=DEFAULT_PK %}?cache_policy=1&all=1';
var systemUsersUrl = "{% url 'api-perms:my-asset-system-users' asset_id=DEFAULT_PK %}?cache_policy=1";
var showAssetHref = false; // Need input default true

var favoriteAssets = [];
var favorBtnTmpl = '<a class="btn btn-xs btn-default btn-favor" data-id="ID"><i class="fa fa-star-o"></i></a>';
var disfavorBtnTmpl = '<a class="btn btn-xs btn-default btn-disfavor" data-id="ID"><i class="fa fa-star"></i></a>';
var actions = {
    targets: 4, createdCell: function (td, cellData) {
       var connBtn = '<a href="{% url "luna-view" %}?login_to=' + cellData +
           '" class="btn btn-xs btn-primary" target="_blank"><i class="fa fa-terminal"></i></a> ';
       var favorBtn = favorBtnTmpl.replace("ID", cellData);
       var disfavorBtn = disfavorBtnTmpl.replace("ID", cellData);

       var btn = connBtn;
       if (favoriteAssets.indexOf(cellData) === -1) {
           btn += favorBtn
       } else {
           btn += disfavorBtn;
       }

       $(td).html(btn)
}};
$(document).ready(function () {
    requestApi({
        method: "GET",
        url: "{% url 'api-assets:favorite-asset-list' %}",
        success: function (data) {
            favoriteAssets = data.map(function (i) {
                return i.asset;
            });
            initTree();
        },
        error: function () {
            initTree();
        },
        flash_message: false
     })
}).on('click', '.labels li', function () {
    var val = $(this).text();
    $("#user_assets_table_filter input").val(val);
    assetTable.search(val).draw();
 })
.on('click', '.asset-detail', function(e) {
    e.preventDefault();
    var data = assetTable.ajax.json();
    var assetId = $(this).data("asset");
    var trs = '';
    var desc = {
        'hostname': "{% trans 'Hostname' %}",
        'ip': "{% trans 'IP' %}",
        'protocols': "{% trans 'Protocols' %}",
        'platform': "{% trans 'Platform' %}",
        'system_users_join': "{% trans 'System user' %}",
        'domain': "{% trans 'Domain' %}",
    };
    var value;
    for (var i = 0; i < data.results.length; i++) {
        value = data.results[i];
        if(value.id === assetId){
            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>";
            }
         break
        }
    };
    $('#asset_detail_tbody').html(trs)
    $('#user_asset_detail_modal').modal();
})
.on('click', '.btn-favor', function () {
    var $this = $(this);
    var assetId = $(this).data("id");
    requestApi({
        url: "{% url 'api-assets:favorite-asset-list' %}",
        method: "POST",
        body: JSON.stringify({asset: assetId}),
        flash_message: false,
        success: function (data) {
            var btn = disfavorBtnTmpl.replace("ID", assetId);
            $this.replaceWith(btn)
        }
    });
})
.on('click', '.btn-disfavor', function () {
    var $this = $(this);
    var assetId = $(this).data("id");
    requestApi({
        url: "{% url 'api-assets:favorite-asset-list' %}?asset=" + assetId,
        method: "DELETE",
        flash_message: false,
        success: function (data) {
            var btn = favorBtnTmpl.replace("ID", assetId);
            $this.replaceWith(btn)
        }
    });
});
</script>
{% endblock %}
