<div ng-class="['usin-profile-groups-wrapper', {'usin-field-editing': editing}]">
	<div>
		<span class="field-name">{{strings.groups}}:</span> {{userGroupNames()}}
		<span ng-show="!user.user_groups.length">-</span>
		<span ng-repeat="groupId in user.user_groups" ng-bind-html="groupId | groupTagHtml"></span>
		<span ng-if="canUpdateUsers">
			<div class="usin-btn-edit usin-icon-edit alignright" ng-click="toggleEdit()" ng-show="!editing && allGroups.length && !settings.editing"></div>
			<div class="usin-btn-apply usin-icon-apply alignright" ng-click="updateGroups()" ng-show="!groupLoading && editing"></div>
			<div class="usin-icon-simple-loading usin-group-loading alignright" ng-show="groupLoading"></div>
			<div class="usin-groups-list" ng-show="editing">
				<div class="usin-error" ng-show="groupErrorMsg">{{groupErrorMsg}}</div>
				<ul>
					<li ng-repeat="group in allGroups">
						<md-checkbox ng-checked="userHasGroup(group.key)" md-no-ink="true"
							aria-label="Toggle Group {{group.val}}" ng-click="toggleGroup(group.key)"></md-checkbox>
						<span>{{group.val}}</span>
					</li>
				</ul>
			</div>
		</span>
	</div>
</div>