<div ng-controller="BusinessServiceStatusController">
    <filter-controls>

    </filter-controls>

    <pagination model="query">
        <div class="">
            <table class="table table-bordered severity">
                <tbody>
                <tr>
                    <th>
                        <a href ng-click="changeOrderBy('severity')">Severity</a>
                        <i ng-show="query.orderBy === 'severity' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
                        <i ng-show="query.orderBy === 'severity' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
                    </th>
                    <th>
                        <a href ng-click="changeOrderBy('name')">Name</a>
                        <i ng-show="query.orderBy === 'name' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
                        <i ng-show="query.orderBy === 'name' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
                    </th>
                </tr>

                <tr ng-repeat="item in items" class="severity-{{item.severity | lowercase}}">
                    <td class="divider bright">
                        {{item['severity'] | severity}}
                    </td>
                    <td>
                        <a href="topology?provider=Business Services&focus-vertices={{item['id']}}&layout=Hierarchy Layout">
                            {{item['name']}}
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </pagination>
</div>