{% extends '_base_list.html' %}
{% load i18n %}
{% load static %}
{% block custom_head_css_js %}
<link href="{% static 'css/plugins/select2/select2.min.css' %}" rel="stylesheet">
<script src="{% static 'js/plugins/select2/select2.full.min.js' %}"></script>

{% endblock %}
{% block content_left_head %}{% endblock %}

{% block table_search %}
{% endblock %}

{% block table_container %}
<table class="table table-striped table-bordered table-hover " id="asset_list_table" >
    <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 'Port' %}</th>
            <th class="text-center">{% trans 'Type' %}</th>
            <th class="text-center">{% trans 'Env' %}</th>
            <th class="text-center">{% trans 'Hardware' %}</th>
            <th class="text-center">{% trans 'Active' %}</th>
            <th class="text-center">{% trans 'Connective' %}</th>
            <th class="text-center">{% trans 'Action' %}</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
{% endblock %}

{% block custom_foot_js %}
<script src="{% static 'js/jquery.form.min.js' %}"></script>
<script type="text/javascript">

function initTable() {
    var options = {
        ele: $('#asset_list_table'),
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                {% url 'assets:asset-detail' pk=DEFAULT_PK as the_url  %}
                console.log('{{ the_url }}');
                var detail_btn = '<a href="{{ the_url }}">' + cellData + '</a>';
                $(td).html(detail_btn.replace('{{ DEFAULT_PK }}', rowData.id));
            }},
            {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) {
                if (cellData == 'Unknown'){
                    $(td).html('<i class="fa fa-circle text-warning"></i>')
                } else if (!cellData) {
                    $(td).html('<i class="fa fa-circle text-danger"></i>')
                } else {
                    $(td).html('<i class="fa fa-circle text-navy"></i>')
                }
            }},
            {targets: 9, createdCell: function (td, cellData, rowData) {
                var conn_btn = '<a href="{% url "terminal:web-terminal" %}?id={{ DEFAULT_PK }}" class="btn btn-xs btn-info">{% trans "Connect" %}</a>'.replace("{{ DEFAULT_PK }}", cellData);
                $(td).html(conn_btn)
            }}
        ],
        ajax_url: '{% url "api-assets:asset-list" %}',
        columns: [
            {data: "id"}, {data: "hostname" }, {data: "ip" }, {data: "port" },
            {data: "get_type_display" }, {data: "get_env_display"}, {data: "hardware_info"},
            {data: "is_active" }, {data: "is_connective"}, {data: "id"}
        ],
        op_html: $('#actions').html()
    };
    return jumpserver.initDataTable(options);
}

$(document).ready(function(){
    initTable();
});

</script>
{% endblock %}
