<script type="text/javascript">
    var roles = ${graph_js};
    function enableParentRoles(roleid){
        var parentRoles = roles[roleid]['parent_roles'];
        var len = parentRoles.length;
        for (var i = 0; i < len; i++) {
            var role = parentRoles[i];
            $('input[name=' + role +']').bootstrapSwitch('state', true, true);
        }
    }
    function disableSubRoles(roleid){
        var parentRoles = roles[roleid]['sub_roles'];
        var len = parentRoles.length;
        for (var i = 0; i < len; i++) {
            var role = parentRoles[i];
            $('input[name=' + role +']').bootstrapSwitch('state', false, true);
        }
    }
</script>
<table id="RecordTable" class="table table-hover table-condensed tablesorter">
    <thead>
        <tr>
            <th>
                Role 
            </th>
            <th class="sorter-false">
                Description
            </th>
            <th class="sorter-false">
                Parent roles
            </th>
            <th class="sorter-false">
                Enable/Disable
            </th>
        </tr>
    </thead>
    <tbody>
        %for role in roles:
        <tr>
            <td>
                ${roles[role]['display_name']}
            </td>
            <td>
                ${roles[role]['description']}
            </td>
            <td>
                <%
                sep = ', '
                parents_roles = []
                for r in graph[role]['parent_roles']:
                    parents_roles.append(roles[r]['display_name'])
                parents = sep.join(parents_roles)
                %>
                ${parents} 
            </td>
            <td>
                <input data-on-color="success" data-off-color="danger" data-on-text="Enabled" 
                       data-off-text="Disabled" data-handle-width="75" type="checkbox" 
                       name="${role}" data-size="mini" id="${role}" >
                <script>$("[name='${role}']").bootstrapSwitch();
                    $('input[name="${role}"]').on('switchChange.bootstrapSwitch', function(event, state) {
                        if (state) {
                            enableParentRoles('${role}');
                        }
                        else {
                            disableSubRoles('${role}');
                        }
                    });
                </script>
            </td>
        </tr>
        % endfor
    </tbody>
</table>
