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

{% block custom_head_css_js %}
    <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
    <script src="{% static "js/plugins/sweetalert/sweetalert.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-detail' pk=object.id %}" class="text-center"><i class="fa fa-laptop"></i> {% trans 'User detail' %} </a>
                            </li>
                            <li>
                                <a href="{% url 'users:user-granted-asset' pk=object.id %}" class="text-center"><i class="fa fa-cubes"></i> {% trans 'Asset granted' %}</a>
                            </li>
                            <li class="active">
                                <a href="{% url 'users:user-asset-permission' pk=object.id %}" class="text-center"><i class="fa fa-edit"></i> {% trans 'Asset permission' %}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="col-sm-10" style="padding-left: 0">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <span class="label"><b>{{ object.name }}</b></span>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                            <i class="fa fa-wrench"></i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-user">
                                        </ul>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="mail-box-header">
                                        <table class="table table-striped table-bordered table-hover"
                                               id="permission_list_table"
                                               style="width: 100%">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th>{% trans 'Name' %}</th>
                                                <th class="text-center">{% trans 'User' %}</th>
                                                <th class="text-center">{% trans 'User group' %}</th>
                                                <th class="text-center">{% trans 'Asset' %}</th>
                                                <th class="text-center">{% trans 'Node' %}</th>
                                                <th class="text-center">{% trans 'System user' %}</th>
                                                <th class="text-center">{% trans 'Validity' %}</th>
                                                <th class="text-center">{% trans 'Action' %}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include '_filter_dropdown.html' %}
{% endblock %}
{% block custom_foot_js %}
<script>
jumpserver.nodes_selected = {};
function format(d) {
    var data = "";
    if (d.users.length > 0 ) {
        data += makeLabel(["{% trans 'User' %}", d.users.join(", ")])
    }
    if (d.user_groups.length > 0) {
        data += makeLabel(["{% trans 'User group' %}", d.user_groups.join(", ")])
    }
    if (d.assets.length > 0) {
       data += makeLabel(["{% trans 'Asset' %}", d.assets.join(", ")])
    }
    if (d.nodes.length > 0) {
        data += makeLabel(["{% trans 'Node' %}", d.nodes.join(", ")])
    }
    if (d.system_users.length > 0) {
        data += makeLabel(["{% trans 'System user' %}", d.system_users.join(", ")])
    }
    if (d.actions.length > 0) {
        data += makeLabel(["{% trans 'Action' %}", d.actions.join(", ")])
    }
    return data
}

function initTable() {
    var options = {
        ele: $('#permission_list_table'),
        toggle: true,
        columnDefs: [
            {targets: 0, createdCell: function (td, cellData, rowData) {
                $(td).addClass("toggle");
                $(td).html("<i class='fa fa-angle-right'></i>");
            }},
            {targets: 1, createdCell: function (td, cellData, rowData) {
                cellData = htmlEscape(cellData);
                var detail_btn = '<a href="{% url "perms:asset-permission-detail" pk=DEFAULT_PK %}">' + cellData + '</a>';
                $(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
            }},
            {targets: 2, createdCell: function (td, cellData) {
                var num = cellData.length;
                $(td).html(num);
            }},
            {targets: 3, createdCell: function (td, cellData) {
                var num = cellData.length;
                $(td).html(num);
            }},
            {targets: 4, createdCell: function (td, cellData) {
                var num = cellData.length;
                $(td).html(num);
            }},
            {targets: 5, createdCell: function (td, cellData) {
                var num = cellData.length;
                $(td).html(num);
            }},
            {targets: 6, createdCell: function (td, cellData) {
                var num = cellData.length;
                $(td).html(num);
            }},
            {targets: 7, 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: 8, createdCell: function (td, cellData, rowData) {
                var name = htmlEscape(rowData.name);
                var update_btn = '<a href="{% url "perms:asset-permission-update" pk=DEFAULT_PK %}" class="btn btn-xs m-l-xs btn-info">{% trans "Update" %}</a>'.replace('{{ DEFAULT_PK }}', cellData);
                var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn-del" data-uid="{{ DEFAULT_PK }}" mark=1 data-name="99991938">{% trans "Delete" %}</a>'
                    .replace('{{ DEFAULT_PK }}', cellData)
                    .replace('99991938', name);
                if (rowData.inherit) {
                    del_btn = del_btn.replace("mark", "disabled")
                }
				$(td).html(update_btn + del_btn);
            }}
        ],
        ajax_url: '{% url "api-perms:asset-permission-list" %}?user_id={{ object.id }}',
        columns: [
            {data: "id"}, {data: "name"}, {data: "users", orderable: false},
            {data: "user_groups", orderable: false}, {data: "assets", orderable: false},
            {data: "nodes", orderable: false}, {data: "system_users", orderable: false},
            {data: "is_valid", orderable: false}, {data: "id", orderable: false, width: "100px"}
        ],
        select: {},
        op_html: $('#actions').html()
    };
    table = jumpserver.initServerSideDataTable(options);
    return table
}

$(document).ready(function() {
   initTable();
   var filterMenu = [
        {title: "{% trans 'Name' %}", value: "name"},
        {title: "{% trans 'Validity' %}", value: "is_valid"},
        {title: "{% trans 'IP' %}", value: "ip"},
        {title: "{% trans 'Hostname' %}", value: "hostname"},
        {title: "{% trans 'Node' %}", value: "node"},
        {title: "{% trans 'System user' %}", value: "system_user"},
        {title: "{% trans 'Inherit' %}", value: "all", submenu: [
            {title: "{% trans 'Include' %}", value: "1"},
            {title: "{% trans 'Exclude' %}", value: "0"},
        ]},
    ];
    initTableFilterDropdown('#permission_list_table_filter input', filterMenu)
})
.on('click', '#is_active', function() {
    var the_url = "{% url 'api-users:user-detail' pk=object.id %}";
    var checked = $(this).prop('checked');
    var body = {
        'is_active': checked
    };
    var success = '{% trans "Update successfully!" %}';
    requestApi({
        url: the_url,
        body: JSON.stringify(body),
        success_message: success
    });
})
.on('click', '.toggle', function (e) {
    e.preventDefault();
    var detailRows = [];
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    var idx = $.inArray(tr.attr('id'), detailRows);

    if (row.child.isShown()) {
        tr.removeClass('details');
        $(this).children('i:first-child').removeClass('fa-angle-down').addClass('fa-angle-right');
        row.child.hide();

        // Remove from the 'open' array
        detailRows.splice(idx, 1);
    }
    else {
        tr.addClass('details');
        $(this).children('i:first-child').removeClass('fa-angle-right').addClass('fa-angle-down');
        row.child(format(row.data())).show();
        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push(tr.attr('id'));
        }
    }
})
</script>
{% endblock %}
