<md-dialog aria-label="Team Details" style="width:950px;height:auto;" class="md-dialog-custom-height" ng-init="getEmployeeDetails()" >
    <form ng-cloak name="myForm ">
        <md-toolbar>
            <div class="md-toolbar-tools " style="background: cadetblue; ">
                <h2>Team Details </h2>
                <span flex></span>
                <md-button class="md-icon-button " ng-click="cancelDialog() ">
                    <i class="fa fa-times fa-2x " style="margin-top: 5px; font-size: 1.5em; float: left "></i>
                </md-button>
            </div>
        </md-toolbar>
        <section layout="row" style="background-color: #fafafa;padding-top: 40px;" layout-sm="column" layout-align="end end" layout-wrap>
        	<md-button class="md-raised " class="pull-right" data-ng-click="addTab()" style="width:120px;background: cadetblue;color:white; " ng-show="!isSecondTab">Add</md-button>
        </section>
        <md-content style="height:1100px !important">
            <md-tabs md-dynamic-height=" " md-border-bottom=" " md-selected="selectedTab">
                <md-tab label="Team Details ">
                    <md-content class="md-padding ">
                        <md-dialog-content>
                            <div class="md-dialog-content ">
                                <div class="form-group ">
                                    <div class="row col-lg-12 " style="margin-left: 0px; ">
                                        <div class="row col-lg-12 col-xs-12 ">
                                            <div class="col-xs-6 text-left ">
                                                <p>
                                                    <b>Project Name:</b> {{projectName}}
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-right ">
                                                <p>
                                                    <b>Manager Name:</b><p><span ng-repeat="x in managerIds"> {{x.name}}<br></span></p>
                                                </p>
                                            </div>

                                        </div>

                                        <div id="gridTest " ui-grid="gridOptions " ui-grid-pagination style="width:99%;height:230px;margin-left:10px; ">
                                            <div class="watermark " ng-show="!gridOptions.data.length ">No data available</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </md-dialog-content>
                    </md-content>
                </md-tab>
                <md-tab label="Add Team Mate" id="tab2">
                    <md-content class="md-padding ">
                        <form ng-cloak name="myForm" id="myForm">
                            <!-- <md-toolbar>
                                <div class="md-toolbar-tools " style="background: cadetblue; ">
                                    <h2>Add 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> -->
                            <div class="md-dialog-content ">
                                <div class="form-group ">
                                    <div class="row col-lg-12 " style="margin-left: 0px; ">
                                        <div class="row col-lg-12 col-xs-12 ">
                                            <div class="col-xs-6 text-center ">
                                                <p>
                                                    <b>Project Name:</b> {{projectName}}
                                                </p>
                                            </div>
                                            <div class="col-xs-6 text-center ">
                                                <p>
                                                    <b>Manager Name:</b><p><span ng-repeat="x in managerIds"> {{x.name}}<br></span></p>
                                                </p>
                                            </div>
                                        </div>
                                        <md-select ng-model="employeeModel " md-selected-text="getEmployeeSelected() " id="selectEmp"  name="employeeModel">
                                            <md-optgroup label="Employee ">
                                                <md-option ng-value="employee " ng-repeat="employee in employeeList ">{{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>
                                        <md-select ng-model="empBillableStatus " md-selected-text="getSelectedBillableStatus() " id="empBillableStatus"  name="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">
                                         <md-datepicker ng-model="newBillingStartDate" md-placeholder="newBillingStartDate " id="newBillingStartDate " md-min-date="minDate " md-max-date="maxDate "
                                            onkeydown="return false " ng-change="currentBillabilityDateChange()"name="newBillingStartDate"></md-datepicker>
                                        </div>
                                        
                                        <md-datepicker ng-model="startDate " md-placeholder="Start Date " id="startDate " md-min-date="minDate " md-max-date="maxDate "
                                            onkeydown="return false " ng-disabled="newBillingStartDate" name="startDate"></md-datepicker>
                                        </br>
                                        <md-datepicker ng-model="endDate " md-placeholder="Projected End Date " id="endDate " md-min-date="minDate " md-max-date="maxDate "
                                            onkeydown="return false " name="endDate"></md-datepicker>
 										

                                        <div role="alert ">
                                            <span class="error " style="color: red; ">{{alertMsg}}</span>
                                        </div>
                                    </div>
                                </div>
                                <md-dialog-actions layout="row ">
                                    <md-button class="md-raised " data-ng-click="validateFields(templateTitle) " style="width:120px;background: cadetblue;color:white; ">Add
                                    </md-button>
                                    <md-button class="md-raised " ng-click="cancelTab() " style="width:120px;background: cadetblue;color:white; ">
                                        Cancel </md-button>
                                </md-dialog-actions>
                        </form>
                    </md-content>
                </md-tab>
            </md-tabs>
        </md-content>
    </form>
</md-dialog>