frontend/src/templates/admin/groups/groups_create.html

<ng-include src="'templates/loader.html'" ng-if="group.loading.group"></ng-include>

<div ng-show="!group.loading.group">

    <div class="panel panel-default">
        <div class="panel-body">
            <form name="group.groupForm" class="form-horizontal" ng-submit="group.createGroup()">
                <div class="form-group" id="row-group_name">
                    <data-form-errors errors="group.groupForm.ae_validation.group_name"></data-form-errors>
                    <label for="group_name" id="label-group_name" class="control-label col-sm-4 col-lg-3">
                        Group name
                        <span class="required">*</span>
                    </label>
                    <div class="col-sm-8 col-lg-9">
                        <input class="form-control" id="group_name" name="group_name" type="text" ng-model="group.group.group_name">
                    </div>
                </div>

                <div class="form-group" id="row-description">
                    <data-form-errors errors="group.groupForm.ae_validation.description"></data-form-errors>
                    <label for="description" id="label-description" class="control-label col-sm-4 col-lg-3">
                        Description
                        <span class="required">*</span>
                    </label>
                    <div class="col-sm-8 col-lg-9">
                        <input class="form-control" id="description" name="description" type="text" ng-model="group.group.description">
                    </div>
                </div>


                <div class="form-group" id="row-submit">
                    <label for="submit" id="label-submit" class="control-label col-sm-4 col-lg-3">
                    </label>
                    <div class="col-sm-8 col-lg-9">
                        <input class="form-control btn btn-primary" id="submit" name="submit" type="submit" value="{{$state.params.groupId ? 'Update' : 'Add'}} Group">
                    </div>
                </div>
            </form>
        </div>
    </div>


    <div class="panel panel-default" ng-if="group.group.id">
        <div class="panel-heading">
            <h3 class="panel-title">Permissions summary</h3>
        </div>
        <div class="panel-body">
            <h3>Direct application permissions</h3>

            <ul class="list-group">
                <li ng-repeat="perm in group.resourcePermissions.group.application" class="animate-repeat list-group-item">
                    <strong>{{ perm.self.resource_name }}</strong>

                    <div class="pull-right">

                        <span class="btn btn-primary btn-xs m-r-1" disabled ng-repeat="perm_name in perm.permissions">{{ perm.self.owner ? 'Resource owner' : perm_name }}</span>

                        <a class="btn btn-default btn-xs" data-uib-tooltip="Visit Application" data-ui-sref="applications.update({resourceId:perm.self.resource_id})">
                            <span class="fa fa-cog"></span>
                        </a>
                    </div>
                </li>
            </ul>

            <h3>Direct dashboard permissions</h3>

            <ul class="list-group">
                <li ng-repeat="perm in group.resourcePermissions.group.dashboard" class="animate-repeat list-group-item">
                    <strong>{{ perm.self.resource_name }}</strong>

                    <div class="pull-right">
                        <span class="btn btn-primary btn-xs m-r-1" disabled ng-repeat="perm_name in perm.permissions">{{ perm.self.owner ? 'Resource owner' : perm_name }}</span>

                        <a class="btn btn-default btn-xs" data-uib-tooltip="Visit Dashboard" data-ui-sref="dashboard.update({resourceId:perm.self.resource_id})">
                            <span class="fa fa-cog"></span>
                        </a>
                    </div>
                </li>
            </ul>

        </div>

    </div>


    <div class="panel panel-default" ng-if="group.group.id">
        <div class="panel-heading">
            <h3 class="panel-title">User list</h3>
        </div>
        <div class="panel-body">

            <form name="add_permission" class="form-inline" ng-submit="group.addUser()">
                <div class="form-group">
                    <input placeholder="Username or email" type="text" class="autocomplete form-control" ng-model="group.form.autocompleteUser" uib-typeahead="u for u in group.searchUsers($viewValue) | limitTo:8" typeahead-loading="searchingUsers" typeahead-wait-ms="250"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-info" ng-disabled="!group.form.autocompleteUser"><span class="fa fa-user"></span> Add user</button>
                </div>
            </form>

        </div>

        <table st-table="displayedCollection" st-safe-src="group.users" class="table table-striped">
            <thead>
            <tr>
                <th st-sort="user_name"><a>Username</a></th>
                <th st-sort="email"><a>Email</a></th>
                <th st-sort="status"><a>Status</a></th>
                <th st-sort="first_name"><a>First Name</a></th>
                <th st-sort="last_name"><a>Last Name</a></th>
                <th st-sort="last_login_date"><a>Last login</a></th>
                <th class="options" style="width: 130px"></th>
            </tr>
            <tr>
                <th><input st-search="user_name" placeholder="search for user name" class="form-control" type="search" st-delay="1"/></th>
                <th><input st-search="email" placeholder="search for email" class="form-control" type="search" st-delay="1"/></th>
                <th></th>
                <th><input st-search="first_name" placeholder="search for first name" class="form-control" type="search" st-delay="1"/></th>
                <th><input st-search="last_name" placeholder="search for last name" class="form-control" type="search" st-delay="1"/></th>
                <th><input st-search="last_login_date" placeholder="search for last name" class="form-control" type="search" st-delay="1"/></th>
                <th></th>
            </tr>
            </thead>
            <tbody>

            <tr ng-repeat="user in displayedCollection">
                <td><img src="{{user.gravatar_url}}" class="avatar"> {{user.user_name}}</td>
                <td>{{user.email}}</td>
                <td class="text-center"><span class="fa" ng-class="{'fa-check-circle':user.status, 'fa-times':!user.status}"></span></td>
                <td>{{user.first_name}}</td>
                <td>{{user.last_name}}</td>
                <td><span data-uib-tooltip="{{user.last_login_date}}">{{user.last_login_date | isoToRelativeTime}}</span></td>
                <td>
                    <a class="btn btn-default btn-sm" data-ui-sref="admin.user.update({userId:user.id})"><span class="fa fa-cog"></span></a>
                        <span class="dropdown" data-uib-dropdown on-toggle="toggled(open)">
                            <a class="btn btn-danger btn-sm" data-uib-dropdown-toggle><span class="fa fa-trash-o"></span></a>
                          <ul class="dropdown-menu">
                              <li><a>No</a></li>
                              <li><a ng-click="group.removeUser(user)">Yes</a></li>
                          </ul>
                        </span>
            </tr>
            <tfoot>
            <tr>
                <td colspan="7" class="text-center">
                    <div st-pagination="" st-items-by-page="50" st-displayed-pages="7"></div>
                </td>
            </tr>
            </tfoot>
            </tbody>
        </table>

    </div>


</div>