<md-dialog aria-label="Role Template" style="width:550px;height:550px;">
    <form ng-cloak name="myForm">
        <md-toolbar>
            <div class="md-toolbar-tools" style="background: cadetblue;">
                <h2><span ng-show="templateTitle == 'Assign' ">Add</span> <span ng-show="templateTitle != 'Assign' ">{{templateTitle}}</span> Project</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>Project Name</b>
                                </td>
                                <td colspan="8">
                                    <input type="text" class="form-control" id="projectName" name="projectName" ng-model="projectName" placeholder="Project Name" />
                                </td>
                            </tr>

                            <tr>
                                <td colspan="4">
                                    <b>Account</b>
                                </td>
                                <td colspan="8">
                                    <md-select ng-model="account" md-selected-text="getAccountText()" ng-change="onAccountChange()" id="account">
                                        <md-optgroup label="account">
                                            <md-option ng-value="account1" ng-repeat="account1 in accounts">{{account1.accountName}}</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="getDomainText()" ng-change="onDomainChange(domain,'{{domain}}')" id="domain">
                                        <md-optgroup label="domain">
                                            <md-option ng-value="domain" ng-repeat="domain in domains">{{domain.domainName}}</md-option>
                                        </md-optgroup>
                                    </md-select>
                                </td>
                            </tr>
                                <tr>
                                    <td colspan="4">
                                        <b>Delivery Lead</b>
                                    </td>
                                    <td colspan="8">                                   
                                        <div style="display: block; float: left; width: 100%;">
                                            <md-select  ng-model="deliveryLeadsSelectedList" data-md-container-class="selectHeader" md-selected-text="getSelectedDeliveryLead()" id="deliveryLead" >
                                                <md-select-header class="selectHeaderChild header-spacing" layout="column">
                                                    <input ng-model="searchTerm" type="search" ng-keydown="updateSearch($event)" ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
                                                        placeholder="Please Search for a lead"  class="searchBoxHeader demo-header-searchbox md-text search-spacingleft" />
                                                    <span class="glyphicon glyphicon-remove close-mdselect" ng-click="closeSelectBox()"></span>
                                                </md-select-header>
                                                <md-optgroup label="managers" class="optionScroll">
                                                    <md-option ng-value="manager" ng-repeat="manager in managerDetails | filter:searchFilter">{{manager.employeeName}}{{manager.name}}</md-option>
                                                </md-optgroup>
                                            </md-select>
                                        </div>
                                    </td>
                                </tr>			
                                
                                <tr>
                                    <td colspan="4">
                                        <b>Project Status</b>
                                    </td>
                                    <td colspan="8">
                                        <md-select ng-model="projectStatus" md-selected-text="getProjectStatus()" id="projectStatus">
                                            <md-optgroup label="projectStatus">
                                                <md-option ng-value="prjctSts" ng-repeat="prjctSts in prjctStses">{{prjctSts}}</md-option>
                                            </md-optgroup>
                                        </md-select>
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td colspan="4">
                                        <b>Project Start Date</b>
                                    </td>
                                    <td colspan="8">
                                        <md-datepicker ng-model="projectStartDate" md-placeholder = "Please select the date"  id ="projectStartDate"
											md-min-date="minDate" md-max-date="maxDate" onkeydown="return false">
										</md-datepicker>
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td colspan="4">
                                        <b>Project End Date</b>
                                    </td>
                                   <td colspan="8">
                                        <md-datepicker ng-model="projectEndDate" md-placeholder = "Please select the date"  id ="projectEndDate"
											md-min-date="minDate" md-max-date="maxDate"
											onkeydown="return false">
										</md-datepicker>
                                    </td>
                                </tr>
                        </table>

                        <div role="alert">
                            <span class="error" style="color: red;">{{alertMsg}}</span>
                        </div>
                    </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;">
                <span ng-show="templateTitle == 'Assign' ">Add</span> <span ng-show="templateTitle != 'Assign' ">{{templateTitle}}</span> </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>