<div>
    <h2>Configuration</h2>

    <span>Filter (by prefix)</span> <input type="text" ng-model="filter" class="form-control">
    <label ng-hide="filteredConfig.length == 0">Spring configuration</label>
    <table class="table table-condensed table-striped table-bordered table-responsive"
        style="table-layout:fixed" ng-hide="filteredConfig.length == 0">
        <thead>
        <tr>
            <th ng-click="predicate = 'prefix'; reverse=!reverse" class="col-sm-4"><span>Prefix</span></th>
            <th class="col-sm-8">Properties</th>
        </tr>
        </thead>

        <tr ng-repeat="entry in filtered = (vm.configuration | filter:filter | orderBy:predicate:reverse)">
            <td><span>{{entry.prefix}}</span></td>
            <td>
                <div class="row" ng-repeat="(key, value) in entry.properties">
                    <div class="col-md-4">{{key}}</div>
                    <div class="col-md-8">
                        <span class="pull-right label label-default break">{{value}}</span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <div ng-repeat="(key, value) in vm.allConfiguration">
        <label ng-hide="filtered.length == 0"><span>{{key}}</span></label>
        <table class="table table-condensed table-striped table-bordered table-responsive"
               style="table-layout:fixed" ng-hide="filtered.length == 0">
            <thead>
            <tr>
                <th class="col-sm-4">Property</th>
                <th class="col-sm-8">Value</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in filtered = (value | filter:filter)">
                <td class="break">{{item.key}}</td>
                <td class="break">
                    <span class="pull-right label label-default break">{{item.val}}</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
