{% extends 'users/_base_user_detail.html' %}
{% load i18n static %}

{% block custom_head_css_js %}
    <script src="{% static 'js/jquery.form.min.js' %}"></script>
{% endblock %}

{% block content_table %}
    <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">
                <table class="table table-striped table-bordered table-hover " id="remote_app_list_table" >
                    <thead>
                    <tr>
                        <th class="text-center">
                            <input type="checkbox" id="check_all" class="ipt_check_all" >
                        </th>
                        <th class="text-center">{% trans 'Name' %}</th>
                        <th class="text-center">{% trans 'App type' %}</th>
                        <th class="text-center">{% trans 'Asset' %}</th>
                        <th class="text-center">{% trans 'Comment' %}</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block custom_foot_js %}
<script>
var inited = false;
var remote_app_table, url;

function initTable() {
    if (inited){
        return
    } else {
        inited = true;
    }
    url = '{% url "api-perms:user-remote-apps" pk=object.id %}';
    var options = {
        ele: $('#remote_app_list_table'),
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                    cellData = htmlEscape(cellData);
                    {% url 'applications:remote-app-detail' pk=DEFAULT_PK as the_url  %}
                    var detail_btn = '<a href="{{ the_url }}">' + cellData + '</a>';
                    $(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
                }},
            {targets: 1, createdCell: function (td, cellData, rowData) {
                    $(td).html(rowData.get_type_display)
                }},
            {targets: 3, createdCell: function (td, cellData, rowData) {
                    var hostname = htmlEscape(cellData.hostname);
                    $(td).html(hostname);
                }}
        ],
        ajax_url: url,
        columns: [
            {data: "id"},
            {data: "name"},
            {data: "type"},
            {data: "asset_info", orderable: false},
            {data: "comment", orderable: false}
        ]
    };
    remote_app_table = jumpserver.initServerSideDataTable(options);
    return remote_app_table
}
$(document).ready(function(){
    initTable();
})
</script>
{% endblock %}
