{% extends 'main/base.html' %}
{% load bootstrap3 %}

{% block content %}
    <div id="tabs">
        <ul>
            <li class="active"><a href="#users" data-toggle="tabs">Users</a></li>
            <li><a href="#groups" data-toggle="tabs">Groups</a></li>
            <li><a href="#containers" data-toggle="tabs">Containers</a></li>
            <li><a href="#privileges" data-toggle="tabs">Privileges</a></li>
        </ul>
        <div id="users">
            <table name="usersTable" id="usersTable" style="width: 100%">
                <thead>
                <tr>
                    <td>DN</td>
                    <td>Assigned Privileges</td>
                </tr>
                </thead>
                <tbody src="/api/ldap/get/limited/users"></tbody>
            </table>
        </div>
        <div id="groups">
            <table id="groupTable" style="width: 100%">
                <thead>
                <tr>
                    <td>DN</td>
                    <td>Assigned Privileges</td>
                </tr>
                </thead>
                <tbody src="/api/ldap/get/limited/groups"></tbody>
            </table>
        </div>
        <div id="containers">
            <table id="containerTable" style="width: 100%">
                <thead>
                <tr>
                    <td>DN</td>
                    <td>Assigned Privileges</td>
                </tr>
                </thead>
                <tbody src="/api/ldap/get/limited/containers"></tbody>
            </table>
        </div>
        <div id="privileges">
            <div id="privilegeAccordion">
                <h3>Business Roles</h3>
                <div>
                    <p>
                    <table id="privileges30Table" style="width: 100%">
                        <thead>
                        <tr>
                            <td>Business role</td>
                            <td>IT Role</td>
                            <td>Privilege Role</td>
                            <td>Resource</td>
                            <td>Entitlement</td>
                        </tr>
                        </thead>
                        <tbody src="/api/rbpm/get/limited/l30"></tbody>
                    </table>
                    </p>
                </div>
                <h3>IT Roles</h3>
                <div>
                    <p>
                    <table id="privileges20Table" style="width: 100%">
                        <thead>
                        <tr>
                            <td>IT Role</td>
                            <td>Privilege Role</td>
                            <td>Resource</td>
                            <td>Entitlement</td>
                        </tr>
                        </thead>
                        <tbody src="/api/rbpm/get/limited/l20"></tbody>
                    </table>
                    </p>
                </div>
                <h3>Privilege Roles</h3>
                <div>
                    <p>
                    <table id="privileges10Table" style="width: 100%">
                        <thead>
                        <tr>
                            <td>Privilege Role</td>
                            <td>Resource</td>
                            <td>Entitlement</td>
                        </tr>
                        </thead>
                        <tbody src="/api/rbpm/get/limited/l10"></tbody>
                    </table>
                    </p>
                </div>
                <h3>Resources</h3>
                <div>
                    <p>
                    <table id="privileges0Table" style="width: 100%">
                        <thead>
                        <tr>
                            <td>Resource</td>
                            <td>Entitlement</td>
                        </tr>
                        </thead>
                        <tbody src="/api/rbpm/get/limited/l0"></tbody>
                    </table>
                    </p>
                </div>

            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#privilegeAccordion').accordion({
                heightStyle: "content",
                collapsible: true
            });
            $.fn.dataTable.ext.buttons.ajaxreload = {
                className: 'buttons-reload',

                action: function (e, dt, node, config) {
                    window.detektyw = this;
                    a = $(this.table().body()).attr('src')
                    this.ajax.url(a).load();
                    console.log(a);
                }
            };
            dataTableOptions = {
                "serverSide": false,
                "processing": true,
                "stateSave": true,
                "lengthMenu": [10, 50, 100, 500, 1000, 5000, 10000],
                fixedHeader: true,
                keys: true,
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'ajaxreload',
                        text: 'Load / Reload',
                    },
                    'copy',
                    'csv',
                    'excel',
                    'pdf',
                    'colvis',
                    'print'
                ]

            };
            $('#usersTable').DataTable(dataTableOptions);
            $('#groupTable').DataTable(dataTableOptions);
            $('#containerTable').DataTable(dataTableOptions);
            $('#privileges30Table').DataTable(dataTableOptions);
            $('#privileges20Table').DataTable(dataTableOptions);
            $('#privileges10Table').DataTable(dataTableOptions);
            $('#privileges0Table').DataTable(dataTableOptions);
            $('#tabs').tabs();
        });
    </script>
{% endblock %}