<div ng-controller="Wizdom365IoCController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'IoC' | translate}}</h1>
        </div>
    </div>

    <wizdom365-spinner style="position: absolute; top: 50%; left: 50%;" loading="loading"></wizdom365-spinner>

    <div class="panel lt-module-page__content-panel">
        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading col1/2" style="cursor:pointer" ng-click="sortReverse = sortColumn == 'key' ? !sortReverse : false; sortColumn = 'key';">
                    <i class="glyphicon sortable-icon" aria-hidden="true" ng-class="sortColumn !== 'key' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                    {{'Query' | translate}}
                </div>
                <div class="lt-flextable__row lt-flextable__row-heading" style="cursor:pointer" ng-click="sortReverse = sortColumn == 'value' ? !sortReverse : false; sortColumn = 'value';">
                    <i class="glyphicon sortable-icon" aria-hidden="true" ng-class="sortColumn !== 'value' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                    {{'Table name' | translate}}
                </div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="registration in registrations | orderBy:sortColumn:sortReverse">
                <div class="lt-flextable__row lt-flextable__row--breakall col1/2">
                    {{registration.key}}
                </div>
                <div class="lt-flextable__row lt-flextable__row--breakall col1/2">
                    {{registration.value}}
                </div>
            </li>
        </ul>
    </div>
</div>
