## -*- coding: utf-8 -*-
<%inherit file="/base/base.html"/>

<%block name="title">
    ${_('User Groups Administration')}
</%block>

<%def name="breadcrumbs_links()">
    ${h.link_to(_('Admin'),h.url('admin_home'))} &raquo; ${_('User Groups')}
</%def>

<%block name="header_menu">
    ${self.menu('admin')}
</%block>

<%def name="main()">
<div class="panel panel-primary">
    <div class="panel-heading clearfix">
        <div class="pull-left">
            ${self.breadcrumbs()}
        </div>
        <div class="pull-right">
        %if h.HasPermissionAny('hg.admin', 'hg.usergroup.create.true')():
            <a href="${h.url('new_users_group')}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Add User Group')}</a>
        %endif
        </div>
    </div>
    <div class="panel-body">
        <table class="table" id="datatable_list_wrap" width="100%"></table>
    </div>
</div>
<script>
    var data = ${h.js(c.data)};
    var $dataTable = $("#datatable_list_wrap").DataTable({
        data: data.records,
        columns: [
            {data: "raw_name", visible: false, searchable: false},
            {data: "group_name", title: ${h.jshtml(_('Name'))}, orderData: 0},
            {data: "desc", title: ${h.jshtml(_('Description'))}, searchable: false},
            {data: "members", title: ${h.jshtml(_('Members'))}, searchable: false},
            {data: "active", title: ${h.jshtml(_('Active'))}, searchable: false, 'sType': 'str'},
            {data: "owner", title: ${h.jshtml(_('Owner'))}, searchable: false},
            {data: "action", title: ${h.jshtml(_('Action'))}, searchable: false, sortable: false}
        ],
        order: [[1, "asc"]],
        dom: '<"dataTables_left"f><"dataTables_right"ip>t',
        pageLength: 100
    });
</script>
</%def>