<div id="outer" class="outer-wrapper"> 
    <div id="svcsource-summary-container" class="container-fluid" ng-controller="DatasourceSummaryController as vm">

        <!-- Modal Dialog for user to confirm deletion of a data source -->
        <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="datasource-summary.confirmDeleteTitle"></h4>
              </div>
              <div class="modal-body">
                  <span ng-bind-html="vm.confirmDeleteMsg" />
              </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.deleteSelectedSvcSource()" translate="shared.Delete"></button>
              </div>
            </div>
          </div>
        </div>

        <!-- Content shown if No Sources yet -->
        <div class="blank-slate-pf" 
             id="svcsource-summary-nosources" 
             ng-show="vm.srcLoading==false && vm.hasSources==false">
            <div class="blank-slate-pf-icon">
                <span class="fa fa-database"></span>
            </div>
            <h1 ng-bind=":: 'datasource-summary.noSourcesExist' | translate" />
            <h2 ng-bind-html=":: 'datasource-summary.welcomeMsg' | translate"></h2>
            <p>
                <span translate="datasource-summary.noSourcesInstructionsMsg" />
            </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>

        <div id="svcsource-summary-table" class="col-md-12 row">
            <div pf-toolbar id="svcsourceToolbar" config="vm.toolbarConfig" ng-show="vm.srcLoading==true || vm.hasSources==true"></div>
    
            <div id="svcsource-summary-updating" ng-show="vm.srcLoading==true">
                <div class="spinner spinner-lg spinner-inline"></div>
                {{:: 'datasource-summary.loadingDataSources' | translate}}
            </div>
    
            <div class="svcsource-summary-results-container" ng-show="vm.srcLoading==false && vm.hasSources==true">
                <div class="svcsource-summary-results">
                    <div class="col-md-12 list-view-container" ng-if="vm.viewType == 'listView'">
                        <div pf-list-view 
                             config="vm.listConfig" 
                             items="vm.getServiceSources()"
                             action-buttons="vm.actionButtons"
                             enable-button-for-item-fn="vm.enableButton"
                             menu-actions="vm.menuActions"
                             update-menu-action-for-item-fn="vm.enableMenuAction">
                            <div class="list-view-pf-left">
                                <span class="fa fa-database list-view-pf-icon-sm"></span>
                            </div>
                            <div class="list-view-pf-left">
                                <img src="{{prop.value}}" width="42" height="24" ng-repeat="prop in item.keng__properties" ng-show="prop.name=='dsbTranslatorImageLink'"/>
                            </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.vdb__description">
                                        <div id="svcsource-summary-results-description-label" class="list-group-item-text" ng-if="item.vdb__description.length > 100">
                                            {{item.vdb__description | limitTo : 100 : 0}} ...
                                        </div>
                                        <div id="svcsource-summary-results-description-label" class="list-group-item-text" ng-if="item.vdb__description.length <= 100">
                                            {{item.vdb__description}}
                                        </div>
                                    </div>
                                </div>
                                <div class="list-view-pf-additional-info">
                                    <div class="list-view-pf-additional-info-item" data-toggle="tooltip" data-placement="right" title="{{ttip.value}}" ng-repeat="ttip in item.keng__properties" ng-show="ttip.name=='dsbTeiidStatusMessage'"> 
                                      <span ng-class="{ 'fa fa-check ds-active': prop.value=='Active' , 'fa fa-exclamation-triangle ds-error': prop.value=='Error' ,'fa fa-exclamation-triangle ds-warning': prop.value=='Loading' || prop.value=='Unknown' , 'label label-info': prop.value=='New' }" ng-repeat="prop in item.keng__properties" ng-show="prop.name=='dsbTeiidStatus'"></span> 
                                      <span ng-class="{ 'ds-active': prop.value=='Active' , 'ds-error': prop.value=='Error' ,'ds-warning': prop.value=='Loading' || prop.value=='Unknown' , 'label label-info': prop.value=='New' }" ng-repeat="prop in item.keng__properties" ng-show="prop.name=='dsbTeiidStatus'">{{prop.value}}</span>
                                    </div>
    
                                    <div class="list-view-pf-additional-info-item" data-toggle="tooltip" data-placement="right" title="The connection for this source" >
                                        <span class="fa fa-exchange"></span>
                                        <span ng-repeat="prop in item.keng__properties" ng-show="prop.name=='dsbSourceConnection'">
                                            {{prop.value}}
                                        </span>
                                    </div>
                                    <div class="list-view-pf-additional-info-item" data-toggle="tooltip" data-placement="right" title="The owner of this source" >
                                        <span ng-repeat="prop in item.keng__properties" ng-show="prop.name=='dsbServiceSource'">
                                            Owner: {{prop.value}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="svcsource-summary-results-ddl" ng-show="vm.srcLoading==false && vm.getServiceSources().length>0 && vm.displayDdl==true">
                    <div class="svcsource-summary-results-ddl-titlebar">
                        <h5 class="svcsource-summary-results-ddl-titlebar-title" translate="datasource-summary.sourceSchema"></h5>
                        <h5 class="svcsource-summary-results-ddl-titlebar-close" ng-click="vm.hideDdl()">X</h5>
                    </div>
                    <div ui-codemirror="{ onLoad : vm.ddlEditorLoaded }" ng-model="vm.selectedSourceDDL" ui-codemirror-opts="vm.ddlEditorOptions">
                    </div>
                </div>
            </div>
    <!--
            <div class="col-md-10 card-view-container" ng-if="vm.viewType == 'cardView'" ng-show="vm.srcLoading==false">
           <div pf-card-view config="vm.listConfig" items="vm.getServiceSources()">
             <div class="col-md-12">
               <span>{{item.keng__id}}</span>
             </div>
             <div class="col-md-12">
               <span>{{item.vdb__description}}</span>
             </div>
           </div>
         </div>
    -->
        
        </div>
    </div>
</div>
