<div class="teiid-dashboard-widgets-data-sources">
    <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="teiid-dashboard-widgets-data-sources-list-datasrc-names-container" ng-show="vm.total > 0">
            <div class="teiid-dashboard-widgets-data-sources-list-datasrc-names">
                <input class="accordian-list-filter" type="text" ng-model="vm.dataSrcFilter" placeholder="filter...">
                <div class="list-group accordian-list teiid-dashboard-widgets-data-sources-list-group">
                    <a class="list-group-item" pagination-id="datasrc-paginate" dir-paginate="datasrc in vm.names|filter:vm.dataSrcFilter|orderBy:'toString()'|itemsPerPage:3">
                        {{datasrc}}
                    </a>
                    <dir-pagination-controls pagination-id="datasrc-paginate" max-size="3" direction-links="true" boundary-links="true"></dir-pagination-controls>
                </div>
            </div>
        </div>
    </div>
</div>