{% extends "prngmgr/base.html" %}

{% block title %}{{ table.title }}{% endblock %}

{% block scripts %}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            var table = $('#{{ table.name }}');
            var data_table;
            var table_def = $.getJSON("{{ columns }}");
            table_def.done( function (columns) {
                data_table = table.DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": "{{ api }}",
                    "searching": true,
                    "pageLength": 25,
                    "columns": columns,
                    "responsive": true,
                    "drawCallback": function ( settings ) {
                        data_table.responsive.recalc();
                    },
                    "rowCallback": function (row, data, index) {
                        if (data.session_state) {
                            if (data.session_state.state) {
                                $( row ).addClass(data.session_state.class);
                            }
                        }
                    }
                })
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1 class="panel-title text-center">{{ table.title }}</h1>
        </div>
        <table id="{{ table.name }}" class="table table-hover nowrap" cellspacing="0" width="100%">
            <thead></thead>
        </table>
    </div>
{% endblock %}