portainer/app/components/teams/teams.html

<rd-header>
  <rd-header-title title="Teams">
    <a data-toggle="tooltip" title="Refresh" ui-sref="teams" ui-sref-opts="{reload: true}">
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </a>
    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
  </rd-header-title>
  <rd-header-content>Teams management</rd-header-content>
</rd-header>

<div class="row" ng-if="isAdmin">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-plus" title="Add a new team">
      </rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="teamname" class="col-sm-1 control-label text-left">Name</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input type="text" class="form-control" id="teamname" ng-model="formValues.Name" ng-change="checkNameValidity()" placeholder="e.g. development">
                <span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[state.validName]" aria-hidden="true"></i></span>
              </div>
            </div>
          </div>
          <!-- !name-input -->
          <!-- team-leaders -->
          <div class="form-group" ng-if="users.length > 0">
            <div class="col-sm-12" >
              <label class="control-label text-left">
                Select team leader(s)
                <portainer-tooltip position="bottom" message="You can assign one or more leaders to this team. Team leaders can manage their teams users and resources."></portainer-tooltip>
              </label>
              <span isteven-multi-select
               ng-if="users.length > 0"
               input-model="users"
               output-model="formValues.Leaders"
               button-label="Username"
               item-label="Username"
               tick-property="ticked"
               helper-elements="filter"
               search-property="Username"
               translation="{nothingSelected: 'Select one or more team leaders', search: 'Search...'}"
               style="margin-left: 20px;">
              </span>
            </div>
          </div>
          <!-- !team-leaders -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!state.validName || formValues.Name === ''" ng-click="addTeam()"><i class="fa fa-plus" aria-hidden="true"></i> Add team</button>
              <i id="createTeamSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
              <span class="text-danger" ng-if="state.teamCreationError" style="margin: 5px;">
                <i class="fa fa-exclamation-circle" aria-hidden="true"></i> {{ state.teamCreationError }}
              </span>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-users" title="Teams">
        <div class="pull-right">
          Items per page:
          <select ng-model="state.pagination_count" ng-change="changePaginationCount()">
            <option value="0">All</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </div>
      </rd-widget-header>
      <rd-widget-taskbar classes="col-lg-12">
        <div class="pull-left" ng-if="isAdmin">
          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
        </div>
        <div class="pull-right">
          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
        </div>
      </rd-widget-taskbar>
      <rd-widget-body classes="no-padding">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th ng-if="isAdmin">
                  <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
                </th>
                <th>
                  <a ng-click="order('Name')">
                    Name
                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                  </a>
                </th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr dir-paginate="team in (state.filteredTeams = (teams | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
                <td ng-if="isAdmin"><input type="checkbox" ng-model="team.Checked" ng-change="selectItem(team)" /></td>
                <td>{{ team.Name }}</td>
                <td>
                  <a ui-sref="team({id: team.Id})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
                </td>
              </tr>
              <tr ng-if="!teams">
                <td colspan="3" class="text-center text-muted">Loading...</td>
              </tr>
              <tr ng-if="teams.length == 0">
                <td colspan="3" class="text-center text-muted">No teams available.</td>
              </tr>
            </tbody>
          </table>
          <div ng-if="teams" class="pull-left pagination-controls">
            <dir-pagination-controls></dir-pagination-controls>
          </div>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>