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

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

{% block content %}
<div class="mail-box-header">
    <table class="table table-striped table-bordered table-hover " id="database_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 'Type' %}</th>
            <th class="text-center">{% trans 'Host' %}</th>
            <th class="text-center">{% trans 'Database' %}</th>
            <th class="text-center">{% trans 'Comment' %}</th>
            <th class="text-center">{% trans 'Action' %}</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
{% endblock %}
{% block custom_foot_js %}
<script>
var inited = false;
var database_app_table, url;

function initTable() {
    if (inited){
        return
    } else {
        inited = true;
    }
    url = '{% url "api-perms:my-database-apps" %}';
    var options = {
        ele: $('#database_app_list_table'),
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                    var name = htmlEscape(cellData);
                    $(td).html(name)
                }},
            {targets: 2, createdCell: function (td, cellData, rowData) {
                    var type = htmlEscape(rowData.get_type_display);
                    $(td).html(type);
                }},
            {targets: 3, createdCell: function (td, cellData, rowData) {
                    var host = htmlEscape(cellData);
                    $(td).html(host);
                }},
            {targets: 4, createdCell: function (td, cellData, rowData) {
                    var database = htmlEscape(cellData);
                    $(td).html(database);
                }},
            {targets: 6, createdCell: function (td, cellData, rowData) {
                    var conn_btn = '<a href="{% url "luna-view" %}?type=database_app&login_to=' +  cellData +'" class="btn btn-xs btn-primary" target="_blank">{% trans "Connect" %}</a>';
                    $(td).html(conn_btn)
                }}
        ],
        ajax_url: url,
        columns: [
            {data: "id"},
            {data: "name"},
            {data: "type"},
            {data: "host"},
            {data: "database"},
            {data: "comment", orderable: false},
            {data: "id", orderable: false}
        ]
    };
    database_app_table = jumpserver.initServerSideDataTable(options);
    return database_app_table
}
$(document).ready(function(){
    initTable();
})
</script>
{% endblock %}
