<md-dialog aria-label="Role Template" style="width:520px;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">
			<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="employeeModel"
				md-selected-text="getEmployeeSelected()" id="selectEmp"
				data-md-container-class="selectHeader"> <md-select-header
				layout="column" class="selectHeaderChild"> <md-input-container>

			<input ng-model="searchTerm" type="search"
				ng-keydown="updateSearch($event)"
				ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
				placeholder="Search..." class="searchBoxHeader md-text" /> </md-input-container> </md-select-header>

			<md-optgroup label="Employee" class="optionScroll"> <md-option
				ng-value="employee"
				ng-repeat="employee in employeeList | filter:searchFilter">{{employee.employeeName}}</md-option>

			</md-optgroup> </md-select>

			<output>Employee Name : {{employeeModel.employeeName}}</output>

			<output>Employee Id : {{employeeModel.employeeId}}</output>

			<output>Email Id : {{employeeModel.emailId}}</output>

			<output>Role : {{employeeModel.role}}</output>

			<output>Designation : {{employeeModel.designation}}</output>

             <div ng-repeat="project in projectInfoList">
					<output>Previous Project Name : {{project.projectName}}</output>
					<output>Billability Status : {{project.billableStatus}}</output>
					<output>Previous Project Start Date : {{ project.startDate | date : "dd-MM-yyyy"}}</output>
					<output>Previous Project End Date : {{project.endDate | date : "dd-MM-yyyy"}}</output>
				</div>


			<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>
			
			<div ng-show="empBillableStatus">
			
			<output>Current Billability Start Date : <md-datepicker ng-model="newBillingStartDate"  md-placeholder="Please Select Date" id ="newBillingStartDate"
						md-min-date="minDate" md-max-date="maxDate"
						ng-change="currentBillabilityDateChange()"
						onkeydown="return false"
						></md-datepicker></br></output>			
			</div>

			<md-datepicker ng-model="startDate" md-placeholder="Assignment Start Date" id ="startDate"
						md-min-date="minDate" md-max-date="maxDate"
						ng-disabled="newBillingStartDate"
						onkeydown="return false"
						></md-datepicker></br>
			<md-datepicker ng-model="endDate" md-placeholder="Assignment End Date" id="endDate"
						md-min-date="minDate" md-max-date="maxDate"
						onkeydown="return false"
						></md-datepicker>
			
			<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>
