<div class="row" >
	<form class="form-horizontal">
		<div class="form-group" style="float:left;padding-left:30px;margin-bottom:0px;">
			<h1 class="page-header">
				Manage Child Apps
			</h1>                        
        </div>        
    </form>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-info">
            <div class="panel-heading ">                
                <h4 class="panel-title p-heading">Create/Edit Child Apps</h4>
            </div>
            <div class="panel-body">
                 <form class="form-inline" >
            		<div class="form-group m-r-10"> 
            		 	<label>Linking Field</label>
            		</div>

            		<div class="form-group m-r-10"> 
            		 	<input type="text"  placeholder="Enter linking field name" class="form-control" ng-model="linkingField" style="width:300px;"/>
            		</div>
            		<div class="form-group m-r-10"> 
            		 	<button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="updateLinkingField()">Save Linking Field</button>
            		 	                       
                      	<button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="cancel()" href="#childapps-dialog" data-toggle="modal">
							Add New Child App
						</button>
                    </div>
	            </form> 
            </div>
        </div>
	</div>
</div>


<div class="row"  style="display:block"> 
	<div class="col-md-12">  
	    <div class="panel panel-info" >
	       
	        <div class="panel-body" >
	        	<table class="table" >
	                <thead>
	                    <tr>
	                        <th>Name</th>
	                        <th>Unique Id</th> 
	                        <th><input type="text" class="form-control" placeholder="Search" ng-model="searchTerm" ng-change="startFrom=0;currentPage = 1;"></th>                                          
	                    </tr>
	                </thead>
	                <tbody>
	                	<tr ng-repeat="app in childApps |filter :{name:searchTerm} | limitTo:pageSize:startFrom">
	                		<td>{{app.name}}</td>
	                		<td>{{app.childappid}}</td>
	                		<td style="text-align:right;">
	                            <button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editChildApp(app)" href="#childapps-dialog" data-toggle="modal">
	                            <i class="fa fa-edit"></i>
	                            </button>
	                            <button type="button" class="btn btn-danger btn-sm editable-submit" ng-click="deleteChildApp(app._id)">
	                            <i class="fa fa-minus"></i>
	                            </button>
	                        </td> 
	                	</tr>
	                	 <tr>
	                        <td colspan="3">
	                            <button type="button" class="btn btn-primary btn-sm editable-submit" ng-disabled="currentPage == 1" ng-click="currentPage=currentPage-1;startFrom=startFrom-pageSize">
	                               <i class="fa fa-2x fa-angle-double-left"></i>
	                            </button>
	                            <b>{{currentPage}}/{{numberOfPages()}}</b>
	                             <button type="button" class="btn btn-primary btn-sm editable-submit" ng-disabled="currentPage >= childApps.length/pageSize " ng-click="currentPage=currentPage+1;startFrom=startFrom+pageSize">
	                                <i class="fa fa-2x fa-angle-double-right"></i>
	                            </button>
	                        </td>
	                       
	                    </tr> 
	                </tbody>
	            </table>
	    	</div>
		</div>
	</div>
</div>

<!-- Dialog  ChildApps Start-->
<div class="modal fade" id="childapps-dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Add/Edit Child App</h4>
            </div>
            <div class="modal-body">
                
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Name</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter name" class="form-control" ng-model="appname">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Unique Id</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter unique id for this child app." class="form-control" ng-model="childappid">
                        </div>
                    </div>                                       
                </form>                                       
            
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="saveChildApp()" ng-show="!edit" ng-disabled="!(appname.length>0 && childappid.length>0)" data-dismiss="modal">Save</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="updateChildApp()" ng-show="edit" data-dismiss="modal" ng-disabled="!(appname.length>0 && childappid.length>0)" >Update</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="cancel()" data-dismiss="modal">Cancel</button>
               
            </div>
        </div>
    </div>
</div>
<!-- Dialog  ChildApps End-->
