<div class="col-md-12">
    <ul class="breadcrumb">
        <li><a href="#/users">{{'label.anchor.users' | translate}}</a></li>
        <li class="active">{{'label.anchor.createuser' | translate}}</li>
    </ul>
	<form name="createuserform" novalidate="" class="form-horizontal well" ng-controller="CreateUserController"
	      rc-submit="submit()">
	    <api-validate></api-validate>
	    <fieldset>
	        <legend>{{'label.heading.createuser' | translate}}</legend>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="username">{{'label.input.username' | translate}}<span
	                    class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <input type="text" id="username" name="username" ng-model="formData.username" class="form-control" required late-Validate/>
	            </div>
	            <div class="col-sm-3">
	                <form-validate valattributeform="createuserform" valattribute="username"/>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="firstname">{{'label.input.firstname' | translate}}<span
	                    class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <input type="text" id="firstname" name="firstname" ng-model="formData.firstname" class="form-control" required
	                       late-Validate/>
	            </div>
	            <div class="col-sm-3">
	                <form-validate valattributeform="createuserform" valattribute="firstname"/>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="lastname">{{'label.input.lastname' | translate}}<span
	                    class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <input type="text" id="lastname" name="lastname" ng-model="formData.lastname" class="form-control" required late-Validate/>
	            </div>
	            <div class="col-sm-3">
	                <form-validate valattributeform="createuserform" valattribute="lastname"/>
	            </div>
	        </div>
	        <div data-ng-switch on="formData.sendPasswordToEmail">
	            <div data-ng-switch-when="true">
	                <div class="form-group">
	                    <label class="control-label col-sm-2" for="email">{{'label.input.email' | translate}}<span
	                            class="required">*</span></label>
	
	                    <div class="col-sm-3">
	                        <input type="email" id="email" name="email" class="form-control" ng-model="formData.email" required late-Validate/>
	                    </div>
	                    <div class="col-sm-3">
	                        <form-validate valattributeform="createuserform" valattribute="email"/>
	                    </div>
	                </div>
	            </div>
	            <div data-ng-switch-when="false">
	                <div class="form-group" data-ng-show="!formData.sendPasswordToEmail">
	                    <label class="control-label col-sm-2" for="email1">{{'label.input.email' | translate}}</label>
	
	                    <div class="col-sm-3">
	                        <input type="email" id="email1" name="email1" class="form-control" ng-model="formData.email"/>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.autogeneratepassword' | translate}}</label>
	
	            <div class="col-sm-3">
	                <label class="checkbox">
	                    <input type="checkbox" ng-model="formData.sendPasswordToEmail">
	                </label>
	            </div>
				
				<label class="control-label col-sm-3">{{'label.input.overridepasswordexpiry' | translate}}
				<i class="icon-question-sign control-label icon-align-left"
				   tooltip="{{'label.tooltip.overridepasswordexpiry' | translate}}"></i></label>
				<div class="col-sm-3">
				<label class="checkbox">
						<input type="checkbox" ng-model="formData.passwordNeverExpires">
					</label>
				</div>

	        </div>
	        <div data-ng-switch on="formData.sendPasswordToEmail">
	            <div data-ng-switch-when="false">
	                <div class="form-group">
	                    <label class="control-label col-sm-2" for="password">{{'label.input.password' | translate}}<span
	                            class="required">*</span></label>
	
	                    <div class="col-sm-3">
	                        <input type="password" id="password" name="password" ng-model="formData.password" class="form-control" required
	                               late-Validate>
	                    </div>
	                    <div class="col-sm-3">
	                        <form-validate valattributeform="createuserform" valattribute="password"/>
	                    </div>
	                </div>
	                <div class="form-group">
	                    <label class="control-label col-sm-2" for="repeatPassword">{{'label.input.repeatpassword' | translate}}<span
	                            class="required">*</span></label>
	
	                    <div class="col-sm-3">
	                        <input type="password" id="repeatPassword" name="repeatPassword" class="form-control"
	                               ng-model="formData.repeatPassword" required late-Validate>
	                    </div>
	                    <div class="col-sm-3">
	                        <form-validate valattributeform="createuserform" valattribute="repeatPassword"/>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.office' | translate}}<span class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <select chosen="offices" id="officeId" ng-model="formData.officeId" class="form-control" data-ng-change="getOfficeStaff()"
	                        ng-options="office.id as office.name for office in offices" value="{{office.id}}">
	                    <option value="">--{{'label.menu.selectoffice' | translate}}--</option>
	                </select>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.staff' | translate}}</label>
	
	            <div class="col-sm-3">
	                <select chosen="staffs" id="staffId" ng-model="formData.staffId"  class="form-control"
	                        ng-options="staff.id as staff.displayName for staff in staffs" value="{{staff.id}}">
	                    <option value="">--{{'label.menu.selectstaff' | translate}}--</option>
	                </select>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.selectroles' | translate}}<span
	                    class="required">*</span></label>
	
	            <div class="col-sm-3">
	                <select id="roles" ng-model="formData.roles" name="role" class="form-control multiselectmin" multiple required>
	                    <option ng-repeat="availablerole in availableRoles" value="{{availablerole.id}}">
	                        {{availablerole.name}}
	                    </option>
	                </select>
	            </div>
	            <div class="col-sm-3">
	                <form-validate valattributeform="createuserform" valattribute="role"/>
	            </div>
	        </div>
	        <div class="col-md-offset-3">
	            <a id="cancel" href="#/users" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
	            <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_USER'>{{'label.button.save' | translate}}</button>
	        </div>
	    </fieldset>
	</form>
</div>