<div class="container" id="registration-form">
	<a href="#/login" class="login-logo"><img masked-image src="assets/img/logo-big.png"></a>
	<form name="form" class="form-horizontal" ng-submit="vm._register(vm.company, vm.employee, vm.credential)" novalidate>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h2>Register a New Company</h2>
					</div>
					<div class="panel-body">
						<div ng-if="vm.step == 1">
							<h4 class="page-header" style="margin-top: 0px;">Company Information</h4>
							<div class="form-group mb-md">
								<label for="name" class="col-sm-2 control-label">Name <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="name" id="name" ng-blur="vm._checkCompany(vm.company.name)" ng-model="vm.company.name" ng-required="true" ng-minlength="3">
									<p class="help-block" ng-show="form.name.$touched && form.name.$error.required">Value is required.</p>
									<p class="help-block" ng-show="form.name.$touched && form.name.$error.minlength">Value is too short.</p>
									<p class="help-block" ng-show="vm._invalidCompany">Name is already being used.</p>
								</div>
							</div>
							<div class="form-group mb-md">
								<label for="phone" class="col-sm-2 control-label">Phone <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="phone" id="phone" ui-mask="(999) 999-9999" ng-model="vm.company.contacts.phone" ng-required="true">
									<p class="help-block" ng-show="form.phone.$touched && form.phone.$error.required">Value is required.</p>
								</div>
							</div>
							<div class="form-group mb-md">
								<label for="email" class="col-sm-2 control-label">Email <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="email" class="form-control" name="email" id="email" ng-model="vm.company.contacts.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 mb-md">
								<label for="address" class="col-sm-2 control-label">Address <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="text" g-places-autocomplete force-selection="true" options="{componentRestrictions: {country: 'us'}}" class="form-control" name="address" id="address" ng-model="vm.company.location.address" ng-change="vm._parseAddress(vm.company.location.address)" ng-required="true" autocomplete="off">
									<p class="help-block" ng-show="form.address.$touched && form.address.$error.required">Value is required.</p>
								</div>
							</div>
						</div>
						<div ng-if="vm.step == 2">
							<h4 class="page-header" style="margin-top: 0px;">Personal Information</h4>
							<div class="form-group mb-md">
								<label for="employee_name" class="col-sm-2 control-label">Name <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="employee_name" id="employee_name" ng-model="vm.employee.name" ng-required="true" ng-minlength="3">
									<p class="help-block" ng-show="form.employee_name.$touched && form.employee_name.$error.required">Value is required.</p>
									<p class="help-block" ng-show="form.employee_name.$touched && form.employee_name.$error.minlength">Value is too short.</p>
								</div>
							</div>
							<div class="form-group mb-md">
								<label for="employee_phone" class="col-sm-2 control-label">Phone <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="employee_phone" id="employee_phone" ui-mask="(999) 999-9999" ng-model="vm.employee.contacts.phone" ng-required="true">
									<p class="help-block" ng-show="form.employee_phone.$touched && form.employee_phone.$error.required">Value is required.</p>
								</div>
							</div>
							<div class="form-group mb-md">
								<label for="employee_email" class="col-sm-2 control-label">Email <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-10">
									<input type="email" class="form-control" name="employee_email" id="employee_email" ng-model="vm.employee.contacts.email" ng-required="true">
									<p class="help-block" ng-show="form.employee_email.$touched && form.employee_email.$error.required">Value is required.</p>
									<p class="help-block" ng-show="form.employee_email.$touched && form.employee_email.$error.email">Invalid email.</p>
								</div>
							</div>
						</div>
						<div ng-if="vm.step == 3">
							<h4 class="page-header" style="margin-top: 0px;">Security Information</h4>
							<div class="form-group mb-md">
								<label for="credential_email" class="col-sm-4 control-label">Email <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-8">
									<input type="email" class="form-control" name="credential_email" id="credential_email" ng-blur="vm._checkCredential(vm.credential.email)" ng-model="vm.credential.email" ng-required="true">
									<p class="help-block" ng-show="form.credential_email.$touched && form.credential_email.$error.required">Value is required.</p>
									<p class="help-block" ng-show="form.credential_email.$touched && form.credential_email.$error.email">Invalid email.</p>
									<p class="help-block" ng-show="vm._invalidCredential">Email is already being used.</p>
								</div>
							</div>
							<div class="form-group mb-md">
								<label for="credential_password" class="col-sm-4 control-label">Password <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-8">
									<input type="password" class="form-control" name="credential_password" id="credential_password" ng-model="vm.credential.password" ng-required="true" ng-minlength="6">
									<p class="help-block" ng-show="form.credential_password.$touched && form.credential_password.$error.required">Value is required.</p>
									<p class="help-block" ng-show="form.credential_password.$touched && form.credential_password.$error.minlength">Value is too short.</p>
								</div>
							</div>
							<div class="form-group mb-md">
								<label for="credential_confirm_password" class="col-sm-4 control-label">Confirm Password <span style="color: #cc0000;">*</span></label>
								<div class="col-sm-8">
									<input type="password" class="form-control" name="credential_confirm_password" id="credential_confirm_password" ng-model="vm.credential.confirm_password" ng-required="true" ng-pattern="vm.credential.password">
									<p class="help-block" ng-show="form.credential_confirm_password.$touched && form.credential_confirm_password.$error.required">Value is required.</p>
									<p class="help-block" ng-show="form.credential_confirm_password.$touched && form.credential_confirm_password.$error.pattern">Password does not match.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="panel-footer">
						<div class="clearfix">
							<a href="#/login" class="btn btn-default pull-left">Already Registered?</a>
							<button ng-show="vm.step == vm.totalSteps" type="submit" ng-disabled="vm.step != vm.totalSteps || !form.$valid" class="btn btn-success pull-right" style="margin-left: 5px;">Register</button>
							<a ng-disabled="vm.step+1 > vm.totalSteps || vm._isValidStep() == false" ng-click="vm._nextStep()" class="btn-info btn pull-right" style="margin-left: 5px;">
								Next
								<i class="ti ti-angle-double-right" style="margin-left: 5px;"></i>
							</a>
							<a ng-disabled="vm.step <= 1" ng-click="vm._previousStep()" class="btn-info btn pull-right">
								<i class="ti ti-angle-double-left" style="margin-right: 5px;"></i>
								Previous
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
