<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li><a href="#/employees">Employees</a></li>
	<li><a href="#/employees/{{vm.employee.id}}">{{vm.employee.name}}</a></li>
	<li class="active">{{vm.action}} Credential</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<form name="form" class="form-horizontal" ng-submit="vm._save(vm.credential)" novalidate>
				<input type="hidden" ng-if="vm.action == 'Edit'" name="id" id="id" ng-model="vm.credential.id">
				<div class="panel panel-midnightblue">
					<div class="panel-heading">
						<h2>{{vm.action}} Credential</h2>
					</div>
					<div class="panel-body">
						<p>Fields with <span style="color: #cc0000;">*</span> are required.</p>
						<div class="form-group">
							<label for="email" class="col-sm-2 control-label">Email <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="email" class="form-control" name="email" id="email" ng-model="vm.credential.email" ng-required="true">
								<p class="help-block" ng-show="form.email.$touched && form.email.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.email.$touched && form.email.$error.email">Invalid email.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-2 control-label">Password <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="password" class="form-control" name="password" id="password" ng-model="vm.credential.password" ng-required="true" ng-minlength="6">
								<p class="help-block" ng-show="form.password.$touched && form.password.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.password.$touched && form.password.$error.minlength">Value is too short.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="confirm_password" class="col-sm-2 control-label">Confirm Password <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<input type="password" class="form-control" name="confirm_password" id="confirm_password" ng-model="vm.credential.confirm_password" ng-required="true" ng-pattern="vm.credential.password">
								<p class="help-block" ng-show="form.confirm_password.$touched && form.confirm_password.$error.required">Value is required.</p>
								<p class="help-block" ng-show="form.confirm_password.$touched && form.confirm_password.$error.pattern">Password does not match.</p>
							</div>
						</div>
						<div class="form-group">
							<label for="roles" class="col-sm-2 control-label">Change Password <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="change_password" id="change_password" value="0" ng-model="vm.credential.change_password" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="change_password" id="change_password" value="1" ng-model="vm.credential.change_password" ng-required="true"> Yes
									</label>
								</div>
								<p class="help-block">User must change password on next login</p>
							</div>
						</div>
						<div class="form-group">
							<label for="roles" class="col-sm-2 control-label">Active <span style="color: #cc0000;">*</span></label>
							<div class="col-sm-8">
								<div class="radio-inline">
									<label>
										<input type="radio" name="active" id="active" value="0" ng-model="vm.credential.active" ng-required="true"> No
									</label>
								</div>
								<div class="radio-inline">
									<label>
										<input type="radio" name="active" id="active" value="1" ng-model="vm.credential.active" ng-required="true"> Yes
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="roles" class="col-sm-2 control-label">Roles</label>
							<div class="col-sm-8">
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="web_access" id="web_access" value="true" ng-model="vm.credential.roles.web_access"> Web Access
									</label>
								</div>
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="mobile_access" id="mobile_access" value="true" ng-model="vm.credential.roles.mobile_access"> Mobile Access
									</label>
								</div>
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="mobile_access_others" id="mobile_access_others" value="true" ng-model="vm.credential.roles.mobile_access_others"> See Other Technicians's Visits
									</label>
								</div>
								<div class="checkbox-inline">
									<label>
										<input type="checkbox" name="is_manager" id="is_manager" value="true" ng-model="vm.credential.roles.is_manager"> Is Manager
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="panel-footer">
						<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<button type="submit" ng-disabled="!form.$valid" class="btn-primary btn">Save</button>
								<a href="#/employees" class="btn-default btn">Cancel</a>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
