<div class="container">
<pre class="alert alert-error" ng-if="error"><b>Error:</b><br/>{{ error | json }}</pre>
<div ng-show="loggers">
<form>
<div class="input-prepend input-append">
<button class="btn" title="Show package-level loggers" ng-class="{'btn-inverse': showPackageLoggers}" ng-click="togglePackageLoggers()"><i class="fa fa-folder-o"></i></button>
<input placeholder="Filter by name ..." class="input-xxlarge" type="search" ng-model="filterLogger.name" />
<button class="btn" title="reload list" ng-click="refreshLoggers()"><i class="fa fa-repeat"></i></button>
<span title="filtered / total" class="add-on">{{ filteredLoggers.length }}/{{ loggers.length }}</span>
</div>
</form>
<table class="table table-hover">
<tbody>
<tr ng-repeat="logger in (filteredLoggers = (loggers | filter:packageFilter | filter:filterLogger) ) | limitTo: limit track by logger.name">
<td>
<sba-logger value="logger" on-level-changed="refreshLoggers"></sba-logger>
</td>
</tr>
<tr ng-show="limit < loggers.length">
<td>
<button class="btn btn-link btn-block" ng-click="limit = limit + 10">show more</button>
</td>
</tr>
<tr ng-show="limit < loggers.length">
<td>
<button class="btn btn-link btn-block" ng-click="limit = loggers.length">show all</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>