<div ng-controller="Wizdom365LanguagesController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Languages' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button class="btn btn-primary wide-config-btn"
                    ng-disabled="vm.saving"
                    ng-click="vm.save()">
                {{vm.saving ? 'Saving' : 'Save configuration' | translate}}
            </button>
        </div>
    </div>

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

    <div class="panel lt-module-page__content-panel">
        <p>{{'Values are cached for 5 mins' | translate}}</p>
        <br />

        <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/8" ng-click="sortReverse = sortColumn == 'active' ? !sortReverse : false; sortColumn = 'active';">
                    <i class="glyphicon sortable-icon" aria-hidden="true" ng-class="sortColumn !== 'active' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                    <span>{{'Active' | translate}}</span>
                </div>
                <div class="lt-flextable__row lt-flextable__row-heading" ng-click="sortReverse = sortColumn == 'displayName' ? !sortReverse : false; sortColumn = 'displayName';">
                    <i class="glyphicon sortable-icon" aria-hidden="true" ng-class="sortColumn !== 'displayName' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                    <span>{{'Language' | translate}}</span>
                </div>
                <div class="lt-flextable__row lt-flextable__row-heading" ng-click="sortReverse = sortColumn == 'tag' ? !sortReverse : false; sortColumn = 'tag';">
                    <i class="glyphicon sortable-icon" aria-hidden="true" ng-class="sortColumn !== 'tag' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                    <span>{{'Language code' | translate}}</span>
                </div>
                <div class="lt-flextable__row lt-flextable__row-heading" ng-click="sortReverse = sortColumn == 'lcid' ? !sortReverse : false; sortColumn = 'lcid';">
                    <i class="glyphicon sortable-icon" aria-hidden="true" ng-class="sortColumn !== 'lcid' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                    <span>{{'LCID' | translate}}</span>
                </div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="language in languages | orderBy:sortColumn:sortReverse">
                <div class="lt-flextable__row col1/8">
                    <input type="checkbox" ng-model="language.active" ng-click="languageClicked(language)" />
                </div>
                <div class="lt-flextable__row">
                    {{language.displayName}}
                </div>
                <div class="lt-flextable__row">
                    {{language.tag}}
                </div>
                <div class="lt-flextable__row">
                    {{language.lcid}}
                </div>
            </li>
        </ul>
    </div>
</div>