<form data-ng-controller="AddRoleController" class="form-horizontal">
    <api-validate></api-validate>
    <div class="paddedleft">
        <h3>{{ 'label.heading.addrole' | translate }}</h3>

        <div class="form-group">
            <label class="control-label col-sm-2">{{ 'label.input.client' | translate }}<span class="required">*</span></label>
			<div class="col-sm-3">            
				<select id="clientId" ng-model="formData.clientId"  class="form-control"
		                ng-options="client.id as client.displayName for client in clients" value="{{client.id}}">
		        </select>
			</div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">{{ 'label.input.role' | translate }}<span class="required">*</span></label>
			<div class="col-sm-3">            
				<select id="role" ng-model="formData.role" ng-options="role.id as role.name for role in roles"
		                value="{{role.id}}"  class="form-control"></select>
			</div>        
		</div>
        <br/>

        <div class="col-md-offset-1">
            <a href="#/viewgroup/{{group.id}}" class="btn btn-default">{{ 'label.button.cancel' | translate }}</a>
            <button type="button" class="btn btn-primary" data-ng-click="addrole()" has-permission='ASSIGNROLE_GROUP'>{{ 'label.button.add' | translate
                }}
            </button>
        </div>
    </div>
    <hr/>
</form>