<div class="page-content-full-width">
    <div ng-controller="UserGroupOverviewCtrl as tableCtrl">

        <ol class="breadcrumb">
            <li translate class="active">NAVIGATION.HEADER.GROUP_MANAGEMENT</li>
        </ol>

        <div style="margin-top: 20px; margin-bottom: 20px;">
            <button class="btn btn-primary btn-sm" ng-click="tableCtrl.addUserGroup()">
                <i class="fa fa-group fa-lg"></i> {{ 'GROUP_MANAGEMENT.ADD_GROUP'|translate }}</button>
        </div>

        <div loading-container="tableParams.settings().$loading" class="table-wrapper" ng-show="tableCtrl.loaded">
            <table ng-table="tableParams" show-filter="true" class="table table-striped table-bordered">
                <colgroup>
                    <col style="width: 20%">
                    <col style="width: 50%">
                    <col style="width: 30%">
                </colgroup>
                <tr ng-repeat="usergroup in $data">
                    <td width="100" data-title="'#'" filter="{ 'id': 'text' }" sortable="'id'">
                        {{usergroup.id}}
                    </td>
                    <td data-title="'WORDS.NAME'|translate" filter="{ 'full_name': 'text' }" sortable="'full_name'">
                        {{usergroup.name}}
                    </td>
                    <td>
                        <div class="btn-group" style="display: inline-block;">
                            <a ng-click="tableCtrl.editUserGroup(usergroup)" class="btn btn-light btn-sm" aria-haspopup="true" uib-tooltip="{{ 'WORDS.EDIT'|translate }}" tooltip-append-to-body="true"><i class="fa fa-edit fa-fw"></i></a>
                            <a ng-click="tableCtrl.delete(usergroup)" class="btn btn-light btn-sm" aria-haspopup="true" uib-tooltip="{{ 'WORDS.DELETE'|translate }}" tooltip-append-to-body="true"><i class="fa fa-trash-o fa-fw"></i></a>
                        </div>
                    </td>
                </tr>
                <tr ng-if="!$data.length">
                    <td colspan="3" translate>GROUP_MANAGEMENT.TEXT.NO_GROUP_FOUND</td>
                </tr>
            </table>
        </div>
    </div>
</div>
