<div class="ds-dashboard-widgets-svcsources">
    <uib-progressbar class="progress-striped active" value="dynamic" type="info" ng-show="vm.loading"></uib-progressbar>

    <p ng-show="! vm.loading && vm.error">Status Error:<br/>'{{vm.error}}'</p>

    <div ng-show="! vm.loading && ! vm.error">
        Number of Data Sources: <span style="color: blue;">{{vm.total}}</span>

        <div class="ds-dashboard-widgets-svcsources-list-tr-names-container" ng-show="vm.total > 0">
            <div class="ds-dashboard-widgets-svcsources-list-tr-names">
                <input class="accordian-list-filter" type="text" ng-model="vm.trFilter" placeholder="filter...">
                <div class="list-group accordian-list ds-dashboard-widgets-svcsources-list-group">
                    <a class="list-group-item" pagination-id="tr-paginate" dir-paginate="tr in vm.names|filter:vm.trFilter|orderBy:'toString()'|itemsPerPage:3">
                        {{tr}}
                    </a>
                    <dir-pagination-controls pagination-id="tr-paginate" max-size="3" direction-links="true" boundary-links="true"></dir-pagination-controls>
                </div>
            </div>
        </div>
        <div id="ds-dashboard-widgets-svcsources-footer" class="card-pf-footer">
            <p>
                <a ng-click="vm.selectPage('datasource-summary')">
                    <span class="fa fa-fw {{vm.page('datasource-summary').icon}}"></span><span>Go to Summary</span>
                </a>
                <span></span>
                <a ng-click="vm.selectPage('svcsource-new')" class="pull-right">
                    <span class="fa fa-fw {{vm.page('svcsource-new').icon}}"></span><span>New Data Source</span>
                </a>
            </p>
        </div>
    </div>
</div>