energylink/public/app/features/org/partials/user_groups.html

<navbar icon="icon-gf icon-gf-users" title="User Groups" title-url="org">
</navbar>

<div class="page-container">
	<div class="page-header">
		<h1>User Groups</h1>

    <div class="page-header-tabs">
      <form name="addTokenForm" class="gf-form-group">
        <div class="gf-form-inline">
          <div class="gf-form max-width-21">
            <span class="gf-form-label">Create a User Group</span>
            <input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' placeholder="Name"></input>
          </div>
          <div class="gf-form">
            <button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup()">Create</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="search-field-wrapper pull-right width-18">
    <span style="position: relative;">
      <input  type="text" placeholder="Find User Group by name" tabindex="1" give-focus="true"
      ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
    </span>
  </div>
  <div class="admin-list-table">
    <table class="filter-table form-inline">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="userGroup in ctrl.userGroups">
          <td>{{userGroup.id}}</td>
          <td>{{userGroup.name}}</td>
          <td class="text-right">
            <a href="org/user-groups/edit/{{userGroup.id}}" class="btn btn-inverse btn-small">
              <i class="fa fa-edit"></i>
              Edit
            </a>
            &nbsp;&nbsp;
            <a ng-click="ctrl.deleteUserGroup(userGroup)" class="btn btn-danger btn-small">
              <i class="fa fa-remove"></i>
            </a>
          </td>
        </tr>
      </tbody>

    </table>
  </div>

  <div class="admin-list-paging" ng-if="ctrl.showPaging">
    <ol>
      <li ng-repeat="page in ctrl.pages">
        <button
          class="btn btn-small"
          ng-class="{'btn-secondary': page.current, 'btn-inverse': !page.current}"
          ng-click="ctrl.navigateToPage(page)">{{page.page}}</button>
      </li>
    </ol>
  </div>
</div>