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

    <wizdom365-spinner class="spinner" loading="loading"></wizdom365-spinner>

    <div class="panel lt-module-page__content-panel">
        <input type="text" class="form-control" placeholder="{{'Search' | translate}}" ng-model="searchTerm">
        <br />
        <div class="position-relative">
            <table class="table " ng-show="!loading">
                <tr>
                    <th class="cursor-pointer" ng-click="sortReverse = sortColumn == 'key' ? !sortReverse : false; sortColumn = 'key';">
                        <i class="glyphicon" aria-hidden="true" ng-class="sortColumn !== 'key' ? 'glyphicon-sort' : sortReverse ? 'active glyphicon-sort-by-attributes-alt' : 'active glyphicon-sort-by-attributes'"></i>
                        {{'Key' | translate}} ({{'Default english' | translate}})
                    </th>
                    <th ng-repeat="language in languages" style="min-width:200px">
                        {{language.DisplayName | translate}}
                        <i style="cursor:pointer" title="{{'Download' | translate}}" class="glyphicon glyphicon-save-file" ng-click="downloadFile(language.Tag)"></i>
                        <label for="file-input{{language.Tag}}">
                            <i style="cursor:pointer" title="{{'Upload' | translate}}" class="glyphicon glyphicon-open-file"></i>
                            <input id="file-input{{language.Tag}}" type="file" style="display:none" translation-read-file="" language="{{language.Tag}}" />
                        </label>
                        <i style="cursor:pointer" bs-popover template="translationPopoverNewKey.html" placement="bottom" auto-close="true" title="{{'New' | translate}}" class="glyphicon glyphicon-plus-sign"></i>
                    </th>
                </tr>
                <tr ng-repeat="item in items | orderBy:sortColumn:sortReverse | filter:searchTerm | startFrom:(currentPage - 1)*30 | limitTo:30 ">

                    <td style="word-break:break-all;">{{item.key}}</td>
                    <td style="word-break:break-all" ng-repeat="language in languages">
                        <span bs-popover
                              style="cursor: pointer; width:100%;"
                              template="translationPopover.html"
                              placement="bottom"
                              auto-close="true"
                              ng-mouseenter="hover = true;"
                              ng-mouseleave="hover = false;">
                            <span ng-if="item.languageValues[language.Tag].customizedValue || item.languageValues[language.Tag].value">
                                {{item.languageValues[language.Tag].customizedValue || item.languageValues[language.Tag].value}}
                            </span>
                            <span class="alert-warning" ng-if="!(item.languageValues[language.Tag].customizedValue || item.languageValues[language.Tag].value)">
                                [{{'No translation' | translate}}]
                            </span>
                            <span ng-if="item.languageValues[language.Tag].customizedValue" class="badge"
                                  ng-class="{'view-templates-badge-system': !item.languageValues[language.Tag].customizedValue && item.languageValues[language.Tag].value,
                                 'view-templates-badge-custom': item.languageValues[language.Tag].customizedValue && !item.languageValues[language.Tag].value,
                                 'view-templates-badge-customized': item.languageValues[language.Tag].customizedValue && item.languageValues[language.Tag].value}">
                                {{(!item.languageValues[language.Tag].customizedValue && item.languageValues[language.Tag].value ? 'System' : (item.languageValues[language.Tag].customizedValue && !item.languageValues[language.Tag].value ? 'Custom' : 'Customized')) | translate}}
                            </span>
                            <span ng-show="hover == true" class="glyphicon glyphicon-pencil"></span>
                        </span>
                    </td>
                </tr>
            </table>
            <div class="text-center">
                <pagination total-items="(items | filter:searchTerm).length - 1"
                            ng-model="currentPage"
                            items-per-page="30"
                            max-size="5"
                            boundary-links="false"
                            previous-text="&lsaquo;"
                            next-text="&rsaquo;"
                            first-text="&laquo;"
                            last-text="&raquo;"></pagination>
            </div>

            <script type="text/ng-template" id="translationPopover.html">
            <div class="popover">
                <div class="popover-content">
                    <div class="form-group">
                        <input type="text" placeholder="{{item.languageValues[language.Tag].value}}" ng-model="item.languageValues[language.Tag].customizedValue" class="form-control" wizdom365-set-focus="true" />
                    </div>
                    <div class="form-actions pull-right">
                        <button ng-click="saveCustomization(language.Tag, item.key, item.languageValues[language.Tag], $hide)" type="submit" class="btn btn-primary">
                            {{'OK' | translate}}
                        </button>
                        <button ng-show="tempValue" ng-click="discardCustomization(language.Tag, item, $hide)" type="button" class="btn btn-danger">
                            {{'Delete' | translate}}
                        </button>
                        <button ng-hide="tempValue"
                                ng-init="tempValue = item.languageValues[language.Tag].customizedValue"
                                ng-click="item.languageValues[language.Tag].customizedValue = tempValue; $hide()" type="button" class="btn btn-default">
                            {{'Cancel' | translate}}
                        </button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            </script>
            <script type="text/ng-template" id="translationPopoverNewKey.html">
            <div class="popover">
                <div class="popover-content">
                    <div class="form-group">
                        <input type="text" placeholder="{{'Key'| translate}}" ng-model="newItem.key" class="form-control" wizdom365-set-focus="true" />
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="{{'Translation' | translate}} ({{language.Tag}})" ng-model="newItem.languageValues[language.Tag].customizedValue" class="form-control"/>
                    </div>
                    <div class="form-actions pull-right">
                        <button ng-click="saveNewKey(language.Tag, newItem, $hide)" type="submit" class="btn btn-primary">
                            {{'OK' | translate}}
                        </button>
                        <button ng-click="$hide()" type="button" class="btn btn-default">
                            {{'Cancel' | translate}}
                        </button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            </script>
        </div>
    </div>
</div>

