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

        <!-- Modal Dialog for user to confirm deletion of a data connection -->
        <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="connection-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.deleteSelectedConnection()" translate="shared.Delete"></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content shown if No Connections yet -->
        <div class="blank-slate-pf" id="connection-summary-noconnections" ng-show="vm.connLoading==false && vm.hasConnections==false">
            <div class="blank-slate-pf-icon">
                <span class="fa fa-database"></span>
            </div>
            <h1 ng-bind=":: 'connection-summary.noConnectionsExist' | translate" />
            <h2 ng-bind-html=":: 'connection-summary.welcomeMsg' | translate"></h2>
            <p>
                <span translate="connection-summary.noConnectionsInstructionsMsg" />
            </p>
            <div class="blank-slate-pf-main-action">
                <button class="btn btn-primary btn-lg" ng-click="vmmain.selectPage('connection-new')">
                <span class="fa fa-fw {{vmmain.page('connection-new').icon}}"></span>
                <span>{{vmmain.page('connection-new').title}}</span>
            </button>
            </div>
        </div>

        <div id="connection-summary-table" class="col-md-12 row">
            <div pf-toolbar id="connectionToolbar" config="vm.toolbarConfig" ng-show="vm.connLoading==true || vm.hasConnections==true"></div>

            <div id="connection-summary-updating" ng-show="vm.connLoading==true">
                <div class="spinner spinner-lg spinner-inline"></div>
                {{:: 'connection-summary.loadingConnections' | translate}}
            </div>

            <div class="connection-summary-results-container" ng-show="vm.connLoading==false && vm.hasConnections==true">
                <div class="connection-summary-results">
                    <div class="col-md-12 list-view-container" ng-if="vm.viewType == 'listView'">
                        <div pf-list-view config="vm.listConfig" items="vm.getConnections()" 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-plug 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.dv__jndiName" data-toggle="tooltip" data-placement="right" title="{{:: 'connection-summary.jndiDescription' | translate}}">
                                        <div id="connection-summary-results-jndi-label" class="list-group-item-text" ng-if="item.dv__jndiName.length > 100">
                                            {{item.dv__jndiName | limitTo : 100 : 0}} ...
                                        </div>
                                        <div id="connection-summary-results-jndi-label" class="list-group-item-text" ng-if="item.dv__jndiName.length <= 100">
                                            {{item.dv__jndiName}}
                                        </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="{{:: 'connection-summary.driverNameLabel' | translate}} : {{item.dv__driverName}}">
                                        <!-- use ng-src rather than src to handle if item has no dsbConnectionImageLink -->
                                        <img ng-src="{{item.dsbConnectionImageLink}}" width="42" height="24"/>
                                    </div>

                                    <div class="list-view-pf-additional-info-item" data-toggle="tooltip" data-placement="right" title="The owner of this connection" ng-if="item.dsbCreator">
                                        {{:: 'connection-summary.ownerLabel' | translate}} : {{item.dsbCreator}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
