<div id="outer" class="outer-wrapper">
	<div id="ds-summary-container" class="container-fluid" ng-controller="DSSummaryController as vm">
	
        <!-- Modal Dialog for user to confirm deletion of a data service -->
        <div class="modal fade dsb-modal" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <span class="pficon pficon-close"></span>
                </button>
                <h4 class="modal-title" id="confirmDeleteModalLabel" translate="dataservice-summary.confirmDeleteTitle"></h4>
              </div>
              <div class="modal-body">
                <div class="col-md-12">{{vm.confirmDeleteMsg}}</div>
                <div class="col-md-1"></div>
                <div class="col-md-11 checkbox">
                  <label>
                    <input type="checkbox" ng-model="vm.deleteServerVdb"> {{'dataservice-summary.deleteServerVdbCheckbox' | translate}}
                  </label>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" translate="shared.Cancel"></button>
                <button type="button" class="btn btn-primary" ng-click="vm.deleteSelectedDataService()" translate="shared.Delete"></button>
              </div>
            </div>
          </div>
        </div>

        <!-- Modal Dialog to inform user of missing source on edit attempt -->
        <div class="modal fade dsb-modal" id="cannotEditModal" tabindex="-1" role="dialog" aria-labelledby="cannotEditModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <span class="pficon pficon-close"></span>
                </button>
                <h4 class="modal-title" id="cannotEditModalLabel" translate="dataservice-summary.cannotEditTitle"></h4>
              </div>
              <div class="modal-body">
                  <span ng-bind-html="vm.cannotEditMsg" />
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" translate="shared.Dismiss"></button>
              </div>
            </div>
          </div>
        </div>

	    <!-- Content shown if No Sources or DataServices yet -->
        <div class="blank-slate-pf" 
             id="dataservice-summary-nosources-noservices" 
             ng-show="vm.dsLoading==false && vm.sourcesLoading==false && vm.hasSources==false && vm.hasServices==false">
            <div class="blank-slate-pf-icon">
                <span class="fa fa-table"></span>
            </div>
            <h1 ng-bind-html=":: 'dataservice-summary.welcomeMsg' | translate" />
            <h2 ng-bind-html=":: 'dataservice-summary.noSourcesOrDataServicesExist' | translate"></h2>
            <p>
                <span translate="dataservice-summary.noSourcesMsg" />
            </p>
<!--            <p>
                <span translate="dataservice-summary.noDataServiceImportMsg" />
            </p>-->
            <div class="blank-slate-pf-main-action">
                <button class="btn btn-primary btn-lg" 
                        ng-click="vmmain.selectPage('svcsource-new')">
                    <span class="fa fa-fw {{vmmain.page('svcsource-new').icon}}"></span>
                    <span>{{vmmain.page('svcsource-new').title}}</span>
                </button>
            </div>
<!--            <div class="blank-slate-pf-secondary-action">
                <button class="btn btn-default btn-lg" 
                        ng-click="vmmain.selectPage('dataservice-import')">
                    <span class="fa fa-fw {{vmmain.page('dataservice-import').icon}}"></span>
                    <span>{{vmmain.page('dataservice-import').title}}</span>
                </button>
            </div>-->
        </div>
	
	    <!-- Content shown if No DataServices yet -->
        <div class="blank-slate-pf" 
             id="dataservice-summary-noservices" 
             ng-show="vm.dsLoading==false && vm.sourcesLoading==false && vm.hasSources==true && vm.hasServices==false">
            <div class="blank-slate-pf-icon">
                <span class="fa fa-table"></span>
            </div>
            <h1 ng-bind-html=":: 'dataservice-summary.welcomeMsg' | translate" />
            <h2 ng-bind-html=":: 'dataservice-summary.noDataServicesExist' | translate"></h2>
            <p>
                <span translate="dataservice-summary.createDataServiceMsg" />
            </p>
            <div class="blank-slate-pf-main-action">
                <button class="btn btn-primary btn-lg" 
                        ng-click="vmmain.selectPage('dataservice-new')">
                    <span class="fa fa-fw {{vmmain.page('dataservice-new').icon}}"></span>
                    <span>{{vmmain.page('dataservice-new').title}}</span>
                </button>
            </div>
            <div class="blank-slate-pf-secondary-action">
                <button class="btn btn-default btn-lg" 
                        ng-click="vm.importDataServiceButtonClicked()">
                    <span class="fa fa-fw {{vmmain.page('dataservice-import').icon}}"></span>
                    <span>{{vmmain.page('dataservice-import').title}}</span>
                </button>
            </div>
        </div>
	
	    <div id="ds-summary-table" class="col-md-10 row">
	        <div pf-toolbar id="dataserviceToolbar" config="vm.toolbarConfig" ng-show="vm.hasServices==true"></div>
	
            <div id="dataservice-summary-updating"
                 ng-show="vm.dsLoading==true || vm.sourcesLoading==true" class="col-md-10 row">
                <div class="spinner spinner-lg spinner-inline" />
                {{:: 'dataservice-summary.LoadingDataServices' | translate}}
	        </div>
	
	        <div class="ds-summary-results-container" ng-show="vm.dsLoading==false && vm.sourcesLoading==false && vm.hasServices==true">
	            <div class="ds-summary-results">
	                <div class="col-md-12 list-view-container" ng-if="vm.viewType == 'listView'">
                        <div pf-list-view config="vm.listConfig" 
                             items="vm.getDataServices()"
                             action-buttons="vm.actionButtons"
                             menu-actions="vm.menuActions">
	                        <div class="list-view-pf-left">
	                            <span class="fa fa-table list-view-pf-icon-sm"></span>
	                        </div>
	                        <div class="list-view-pf-body">
	                            <div class="list-view-pf-description display-block">
	                                <div class="list-group-item-heading">
	                                    {{item.keng__id}}
	                                </div>
                                    <div ng-if="item.tko__description">
                                        <div class="list-group-item-text" ng-if="item.tko__description.length > 100">
                                            {{item.tko__description | limitTo : 100 : 0}} ...
                                        </div>
                                        <div class="list-group-item-text" ng-if="item.tko__description.length <= 100">
                                            {{item.tko__description}}
                                        </div>
                                    </div>
	                            </div>
	                            <div class="list-view-pf-additional-info">
	                                <!-- TODO - consider what else to include here, preferably the service sources available -->
                                    <div class="list-view-pf-additional-info-item" uib-tooltip="{{:: 'dataservice-summary.viewSourcesToolTip' | translate}}">
                                        <span class="fa fa-database"></span>
                                        <span ng-show="item.serviceViewTables.length==1">{{item.serviceViewTables[0]}}</span>
                                        <span ng-show="item.serviceViewTables.length==2">{{item.serviceViewTables[0]}}, {{item.serviceViewTables[1]}}</span>
                                    </div>
	
	                                <!-- 
	                                <div class="list-view-pf-additional-info-item" uib-tooltip="{{:: 'dataservice-summary.connectionsNumberToolTip' | translate}}">
	                                    <span class="fa fa-exchange"></span>
	                                    <strong>{{item.connections}}</strong>
	                                    <span>{{item.connections === 1 ? 'shared.Connection' : 'shared.Connections' | translate}}</span>
	                                </div>
	                                -->
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div> <!-- ds-summary-results -->
	<!-- 
	        <div class="col-md-12 card-view-container" ng-if="vm.viewType == 'cardView'">
	           <div pf-card-view config="vm.listConfig" items="vm.getDataServices()">
	             <div class="col-md-12">
	               <span>{{item.keng__id}}</span>
	             </div>
	             <div class="col-md-12">
	               <span>{{item.tko__description}}</span>
	             </div>
	           </div>
	        </div>
	-->
	    </div>
	</div>
</div>
