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

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

        <div style="margin-top: 20px; margin-bottom: 20px;">
            <button class="btn btn-primary btn-sm" ng-click="tableCtrl.addUser()">
                <i class="fa fa-user fa-lg"></i> {{ 'USER_MANAGEMENT.ADD_USER'|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: 10%">
                    <col style="width: 10%">
                    <col style="width: 25%">
                    <col style="width: 20%">
                    <col style="width: 20%">
                    <col style="width: 15%">
                </colgroup>
                <tr ng-repeat="user in $data">
                    <td width="100" data-title="'#'" filter="{ 'id': 'text' }" sortable="'id'">
                        {{user.id}}
                    </td>
                    <td data-title="'WORDS.STATUS'|translate" filter="{ 'status': 'text' }" sortable="'status'">
                        <span class="label label-success" ng-show="user.enabled">{{'WORDS.STATUS_ACTIVE'|translate}}</span>
                        <span class="label label-danger" ng-show="!user.enabled">{{'WORDS.STATUS_DISABLED'|translate}}</span>
                    </td>
                    <td data-title="'WORDS.NAME'|translate" filter="{ 'full_name': 'text' }" sortable="'full_name'">
                        {{user.full_name}}
                    </td>
                    <td data-title="'WORDS.USERNAME'|translate" filter="{ 'username': 'text' }" sortable="'username'">
                        {{user.username}}
                    </td>
                    <td data-title="'WORDS.EMAIL'|translate" filter="{ 'email': 'text' }" sortable="'email'">
                        {{user.email}}
                    </td>
                    <td>
                        <div class="btn-group" style="display: inline-block;">
                            <a ng-click="tableCtrl.editUser(user)" 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.deactivate(user)" class="btn btn-light btn-sm" ng-show="user.enabled && currentUser.id != user.id" aria-haspopup="true" uib-tooltip="{{ 'WORDS.DEACTIVATE'|translate }}" tooltip-append-to-body="true"><i class="fa fa-lock fa-fw"></i></a>
                            <a ng-click="tableCtrl.activate(user)" class="btn btn-light btn-sm" ng-show="!user.enabled && currentUser.id != user.id" aria-haspopup="true" uib-tooltip="{{ 'WORDS.ACTIVATE'|translate }}" tooltip-append-to-body="true"><i class="fa fa-unlock fa-fw"></i></a>
                            <a ng-click="tableCtrl.disableSecret(user)" class="btn btn-light btn-sm" aria-haspopup="true" uib-tooltip="{{ '2_FACTOR_AUTH.DISABLE'|translate }}" tooltip-append-to-body="true" ng-show="user.has_secret && currentUser.id != user.id"><i class="fa fa-mobile fa-fw"></i></a>
                            <a ng-click="tableCtrl.delete(user)" class="btn btn-light btn-sm" aria-haspopup="true" uib-tooltip="{{ 'WORDS.DELETE'|translate }}" tooltip-append-to-body="true" ng-show="currentUser.id != user.id"><i class="fa fa-trash-o fa-fw"></i></a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
