<md-dialog aria-label="Role Template" style="width:400px;height:800px;" ng-init="getProjects()">
<form ng-cloak name="myForm">
	<md-toolbar>
	<div class="md-toolbar-tools" style="background: cadetblue;">
		<h2>{{templateTitle}} Team Mate</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">
			<output id="employeeName" name="employeeName">Employee Name
				: {{employeeName}}</output>
			<output>Employee Id : {{employeeId}}</output>
			<output>Email Id : {{emailId}}</output>
			<output>Role : {{role}}</output>
			<output>Designation : {{designation}}</output>
			<output>Experience : {{experience}}</output>
			<output>Mobile Number : {{mobileNumber}}</output>
			<md-select ng-model="projectModel"
				md-selected-text="getProjectSelected()" id="selectProject">
			<md-optgroup label="Project"> <md-option
				ng-value="project" ng-repeat="project in projectList">{{project.projectName}}</md-option>
			</md-optgroup> </md-select>
			<md-select ng-model="shift" md-selected-text="getSelectedShift()" id="empShift">
			<md-optgroup label="shifts"> <md-option ng-value="shift"
				ng-repeat="shift in shifts">{{shift}}</md-option> </md-optgroup> </md-select>
		<!-- 	<md-select ng-model="empDesignation" md-selected-text="getSelectedDesignation()" id="empDesignation">
			<md-optgroup label="designations"> <md-option ng-value="designation"
				ng-repeat="designation in designations">{{designation}}</md-option> </md-optgroup> </md-select> -->
			<md-select ng-model="empBillableStatus" md-selected-text="getSelectedBillableStatus()" id="empBillableStatus">
			<md-optgroup label="billable statuses"> <md-option ng-value="billableStatus"
				ng-repeat="billableStatus in billableStatuses">{{billableStatus}}</md-option> </md-optgroup> </md-select>
			<md-datepicker ng-model="startDate" md-placeholder="Start Date"
						md-min-date="minDate" md-max-date="maxDate"
						onkeydown="return false"
						></md-datepicker>
			<md-datepicker ng-model="endDate" md-placeholder="Projected End Date"
						md-min-date="minDate" md-max-date="maxDate"
						onkeydown="return false"
						></md-datepicker>
			<!-- <input type="text" class="form-control" id="experience"
				name="experience" ng-model="experience" placeholder="Experience" /><br> 
			<input type="text" class="form-control" id="mobileNumber"
				name="mobileNumber" ng-model="mobileNumber" placeholder="MobileNumber" /><br> -->
			<div role="alert">
				<span class="error" style="color: red;">{{alertMsg}}</span>
			</div>
		</div>
	</div>
	</md-dialog-content>

	<md-dialog-actions layout="row"> <md-button
		class="md-raised" data-ng-click="validateFields(templateTitle)"
		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>
