<div class="table-responsive">
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th scope="col">
					&nbsp;
				</th>
				<th scope="col" colspan="{{rights_list.roles.length}}" class="text-center text-nowrap">
					<lmsg src="acl.role_based.edit.role_name">[Role]</lmsg>
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td ng-repeat="role in rights_list.roles" class="text-center text-nowrap">
					<label >
						<input type="checkbox" ng-model="role.checked" ng-change="rights_list.onRoleCheckboxChange(role)"> {{role.name}}
					</label>
				</td>
			</tr>
			<tr ng-repeat="group in rights_list.rightGroups">
				<td>
					{{group.name}}
				</td>
				<td ng-repeat="role in rights_list.roles" class="text-center">
					<select class="form-control" style="min-width: 170px;"
					        ng-init="groupRight = rights_list.getCurrentGroupValue(role, group.rights)"
					        ng-model="groupRight"
					        ng-change="rights_list.onRightGroupChange(role, group.rights, groupRight)"
							ng-options="bitmask as rights_list.getRightName(bitmask) for bitmask in group.rights">
					</select>
				</td>
			</tr>
			<tr ng-repeat="right in rights_list.displayRights">
				<td>
					{{right.name}}
				</td>
				<td ng-repeat="role in rights_list.roles" class="text-center">
					<input type="checkbox" ng-click="rights_list.onRightCheckboxChange(role, right.bitmask)" ng-checked="rights_list.isRoleSelected(role.rights, right.bitmask)">
				</td>
			</tr>
		</tbody>
	</table>
</div>
