<md-dialog aria-label="Role Template" style="width:520px;height:450px;">
    <form ng-cloak name="myForm">
        <md-toolbar>
            <div class="md-toolbar-tools" style="background: cadetblue;">
                <h2>{{templateTitle}} 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 ID</b>
                                </td>
                                <td colspan="8">
                                    <input type="text" class="form-control" id="projectId" name="projectId" ng-model="projectId" placeholder="Project Id Auto Generates" ng-blur="" ng-disabled="true" />
                                </td>
                            </tr>
                            <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()" 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()" id="domain">
                                        <md-optgroup label="domain">
                                            <md-option ng-value="domain" ng-repeat="domain in account.subDomains">{{domain}}</md-option>
                                        </md-optgroup>
                                    </md-select>
                                </td>
                            </tr>
                                <tr>
                                    <td colspan="4">
                                        <b>Lead</b>
                                    </td>
                                    <td colspan="8">
                                        <div class="leads-data" ng-show="managersSelectedList.length > 0">
                                            <div ng-repeat="item in managersSelectedList">
                                                <p> {{item.employeeName}}
                                                    <span ng-click="removeSelectedLead(item)" class="glyphicon glyphicon-remove"></span>
                                                </p>
                                            </div>
                                        </div>

                                        <div style="display: block; float: left; width: 100%;">
                                            <md-select  ng-model="managersSelectedList" data-md-container-class="selectHeader" md-selected-text="getSelected()" multiple >
                                                <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}}</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>
                        </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()" 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>