{% load staticfiles %}


<table id="_deviceInfoTable" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th></th>
            {% for column in table_data.header_columns %}
                <th>{{ column }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            {% for column in table_data.header_columns %}
                <th>{{ column }}</th>
            {% endfor %}
        </tr>
    </tfoot>
    <tbody>
    {% for row in table_data.body_rows %}
        <tr data-child-information="{% for row in row.extra_data %} <tr><td>{{ row.name }}</td><td>{{ row.value }}</td></tr>{% endfor %}">
            <td><img src="{%static "img/plus2-64.png" %}" style="max-width: 16pt; max-height: 16pt"></td>

            {% for column in row.row_data %}
                {% if column.sort == True %}
                    <td data-order="{{ column.sort_value }}" bgcolor="{{column.color}}">{{ column.value }}</td>
                {% else %}
                    <td bgcolor="{{column.color}}">{{ column.value }}</td>
                {% endif %}
            {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
</table>


<script>
    var table;

    $(document).ready(function() {

        var table  = $('#_deviceInfoTable').DataTable({
            "bFilter"           : false,
            "bLengthChange"     : false,
            "bInfo"             : false,
            "scrollY"           : "200px",
            "scrollCollapse"    : true,
            "paging"            : false,
            "order"             : [[ 2, "asc" ]]
        });

        $('#_deviceInfoTable tr').on( 'click', '',function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );
            var data = table.row(this).data();
            on_DeviceInfoTableRowClicked(data[1]);
            if ( row.child.isShown() ) {
                this.src = "{%static "img/plus2-64.png" %}";
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                this.src = "{%static "img/minus2-64.png" %}";
                row.child(tr.attr('data-child-information')).show();
                tr.addClass('shown');
            }
        } );
    });

</script>