<md-dialog aria-label="Role Template" style="width:700px;height:900px;">
<form ng-cloak name="myForm">
	<md-toolbar>
	<div class="md-toolbar-tools"
		style="background: cadetblue;">
		<h2>{{templateTitle}} Employee</h2>
		<span flex></span>
		<md-button class="md-icon-button" ng-click="cancel()"> <i
			class="fa fa-times fa-2x"
			style="margin-top: 5px; font-size: 1.5em; float: left"></i> </md-button>
	</div>
	</md-toolbar>

	<md-dialog-content>
	<div class="md-dialog-content">
		<div class="form-group">
		<div class="row" >
			<table width="450px">
			<tr>
			<td colspan="4">
			<b >Employee ID</b></td>
			<td colspan="8"><input type="text" class="form-control" id="empId" name="empId"
				ng-model="empId" placeholder="Employee ID" ng-blur="validateEmpId()" ng-disabled="isDisabled"/>
			</td>
			<tr>
			<td colspan="4">
			<b >Employee Name</b></td>
			<td colspan="8"><input type="text" class="form-control" id="empName" name="empName"
				ng-model="empName" placeholder="Employee Name" />
			</td>
			</tr>
			
			<tr>
			<td colspan="4">
			<b >Email</b></td>
			<td colspan="8"><input type="text" class="form-control" id="empEmail" name="empEmail"
				ng-model="empEmail" placeholder="Email ID" ng-blur="validateEmailId()" ng-disabled="isDisabled"/>
			</td>
			</tr>
			<tr>
			<td colspan="4">
			<b >Role</b></td>
			<td colspan="8"><md-select ng-model="empRole"  md-selected-text="getSelectedRole()" id="empRole" >
			<md-optgroup label="roles"> <md-option ng-value="role"
				ng-repeat="role in roles">{{role}}</md-option> </md-optgroup> </md-select>
			</td>
			</tr>
				<tr>
			<td colspan="4">
			<b >Designation</b></td>
			<td colspan="8"><md-select ng-model="designation"  md-selected-text="getDesignationText()" id="designation" >
			<md-optgroup label="designations"> <md-option ng-value="designation"
				ng-repeat="designation in designations">{{designation}}</md-option> </md-optgroup> </md-select> 
			</td>
			</tr>
			<tr>
			<td colspan="4">
			<b >Work Location</b></td>
			<td colspan="8"><md-select ng-model="empLocation" md-selected-text="getSelectedLocation()" id="empLocation">
			<md-optgroup label="locations"> <md-option ng-value="location"
				ng-repeat="location in locations">{{location}}</md-option> </md-optgroup> </md-select>
			</td>
			</tr>
			<tr>
			<td colspan="4">
			<b >Functional Group</b></td>
			<td colspan="8"> <md-select ng-model="functionalGroup" md-selected-text="getSelectedFunctionalGroup()" id="functionalGroup">
			<md-optgroup label="Functional Org"> <md-option ng-value="functionalGroup"
				ng-repeat="functionalGroup in functionalGroups">{{functionalGroup}}</md-option> </md-optgroup> </md-select>
			</td>
			</tr>
			<tr>
			<td colspan="4">
			<b >Domain</b></td>
			<td colspan="8"> <md-select ng-model="domain" md-selected-text="getSelectedDomain()" id="domain">
			<md-optgroup label="Domain"> <md-option ng-value="domain"
				ng-repeat="domain in domains">{{domain}}</md-option> </md-optgroup> </md-select>
			</td>
			</tr>
			<tr>
			<td colspan="4">
			<b >Employment Type</b></td>
			<td colspan="8"> <md-select ng-model="employmentType" md-selected-text="getSelectedEmploymentType()" id="employmentType">
			<md-optgroup label="Employment Type"> <md-option ng-value="employmentType"
				ng-repeat="employmentType in employmentTypes">{{employmentType}}</md-option> </md-optgroup> </md-select>
			</td>
			</tr>
			
			<tr>
			<td colspan="4">
			<b >Employment Status</b></td>
			<td colspan="8"> <md-select ng-model="empStatus" md-selected-text="getSelectedEmpStatus()" id="empStatus">
			<md-optgroup label="Employment Status"> <md-option ng-value="status"
				ng-repeat="status in empStatuses">{{status}}</md-option> </md-optgroup> </md-select>
			</td>
			</tr>
				<tr>
			<td colspan="4">
			<b >Date of Joining</b></td>
			<td colspan="8"> <md-datepicker ng-model="dateOfJoining" md-placeholder="Date of Joining"
						md-min-date="minDate" md-max-date="maxDate"
						onkeydown="return false"
						></md-datepicker>
			</td>
			</tr>
				<tr>
			<td colspan="4">
			<b >Date of Birth</b></td>
			<td colspan="8"> <md-datepicker ng-model="dateOfBirth" md-placeholder="Date of Birth"
						md-min-date="minDate" md-max-date="maxDate"
						onkeydown="return false"
						></md-datepicker>
			</td>
			</tr>
				<tr>
			<td colspan="12">
			<div role="alert">
				<span class="error" style="color: red;">{{alertMsg}}</span>
			</div>
			</td>
			</tr>
			</table>
				
			<!-- <md-datepicker ng-model="expiryDate" md-placeholder="Expiry date"
						md-min-date="minDate" md-max-date="maxDate"
						onkeydown="return false"
						></md-datepicker>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Employee Name</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b> <input type="text" class="form-control" id="empName" name="empName"
				ng-model="empName" placeholder="Employee Name" />
					</p>
				</div>
			</div>
				<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Email</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b><input type="text" class="form-control" id="empEmail" name="empEmail"
				ng-model="empEmail" placeholder="Email ID" ng-blur="validateEmailId()" ng-disabled="isDisabled"/>
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Role</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b><md-select ng-model="empRole"  md-selected-text="getSelectedRole()" id="empRole" >
			<md-optgroup label="roles"> <md-option ng-value="role"
				ng-repeat="role in roles">{{role}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12" style="display:none">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Shift</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b><md-select ng-model="empShift" class="form-control" md-selected-text="getSelectedShift()" id="empShift" ng-disabled="isDisabled" style="display:none">
			<md-optgroup label="shifts"> <md-option ng-value="shift"
				ng-repeat="shift in shifts">{{shift}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
				<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Designation</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<md-select ng-model="designation"  md-selected-text="getDesignationText()" id="designation" >
			<md-optgroup label="designations"> <md-option ng-value="designation"
				ng-repeat="designation in designations">{{designation}}</md-option> </md-optgroup> </md-select> 
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Work Location</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b>   <md-select ng-model="empLocation" md-selected-text="getSelectedLocation()" id="empLocation">
			<md-optgroup label="locations"> <md-option ng-value="location"
				ng-repeat="location in locations">{{location}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Functional Group</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b>   <md-select ng-model="functionalGroup" md-selected-text="getSelectedFunctionalGroup()" id="functionalGroup">
			<md-optgroup label="Functional Org"> <md-option ng-value="functionalGroup"
				ng-repeat="functionalGroup in functionalGroups">{{functionalGroup}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Domain</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b>    <md-select ng-model="domain" md-selected-text="getSelectedDomain()" id="domain">
			<md-optgroup label="Domain"> <md-option ng-value="domain"
				ng-repeat="domain in domains">{{domain}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Employment Type</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b>    <md-select ng-model="employmentType" md-selected-text="getSelectedEmploymentType()" id="employmentType">
			<md-optgroup label="Employment Type"> <md-option ng-value="employmentType"
				ng-repeat="employmentType in employmentTypes">{{employmentType}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
			<div class="row col-lg-12 col-xs-12">
				<div class="col-lg-5 col-xs-6" >
					<p>
						<b>Employment Status</b>
					</p>
				</div>
				<div class="col-lg-7 col-xs-6">
					<p>
						<b>:</b>     <md-select ng-model="empStatus" md-selected-text="getSelectedEmpStatus()" id="empStatus">
			<md-optgroup label="Employment Status"> <md-option ng-value="status"
				ng-repeat="status in empStatuses">{{status}}</md-option> </md-optgroup> </md-select>
					</p>
				</div>
			</div>
</div>
			 -->
		</div>
			
		</div>
	</div>
	</md-dialog-content>

	<md-dialog-actions layout="row"> <md-button
		class="md-raised" data-ng-click="validateFields()" style="width:120px;background: cadetblue;color:white;">
	{{templateTitle}} </md-button> <md-button class="md-raised" ng-click="cancel()" style="width:120px;background: cadetblue;color:white;">
	Cancel </md-button> </md-dialog-actions>
</form>
</md-dialog>
