{# Raw block to display the AngularJS template #}
{% verbatim %}
<div id="translation-grid" ng-app="translationApp" ng-controller="TranslationController">
    <div ng-if="profilerTokens != null">
        <div class="row" ng-controller="DataSourceController" >
            <div class="col-md-2">
                <label>{{ labels.dataSource }}:&nbsp;</label>
                <div class="btn-group" role="group">
                    <button type="button" class="btn" ng-class="defaultSourceClass" ng-click="resetSource()">
                        {{ labels.allTranslations }}
                    </button>
                    <button type="button" class="btn" ng-class="tokenSourceClass" ng-click="useTokenAsSource()">
                        {{ labels.profiler }}
                    </button>
                </div>
            </div>
            <div class="col-md-5" ng-show="showProfiles">
                <label>{{ labels.latestProfiles }}:&nbsp;</label>
                <select ng-model="selectedToken" ng-change="changeToken(selectedToken)" ng-options="p.token as p.token+' - '+p.url for p in profilerTokens" class="form-control"></select>
            </div>
            <div class="col-md-2" ng-show="showProfiles">
                <label>{{ labels.profile }}:&nbsp;</label>
                <input type="text" ng-model="selectedToken" ng-change="changeToken(selectedToken)" class="form-control" />
            </div>
        </div>

        <hr  />
    </div>

    <div class="position-absolute top-0 end-0">
            <a ng-click="hideColumnsSelector = !hideColumnsSelector" class="btn btn-default btn-sm btn-manage-col">
                <span class="bi-eye-fill"></span>
                {{ labels.hideCol }}
            </a>
        </div>

    <div ng-show="hideColumnsSelector" class="row">
        <div class="d-flex w-100 py-2 mb-3">
          <div ng-repeat="column in columns track by $index" class="locale form-check form-switch me-4">
                <label for="toggle-{{ column.index }}">
                    <input class="form-check-input" type="checkbox" id="toggle-{{ column.index }}" ng-model="column.visible" ng-click="toggleSimilar(column)" />
                    {{ column.title }}
                </label>
            </div>
        </div>
    </div>

    <div class="row margin-row">
        <div class="col-md-12">
            <table ng-table="tableParams" show-filter="true" template-pagination="pager-template" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th ng-repeat="column in columns track by $index"
                            ng-show="column.visible"
                            ng-click="sortGrid(column)"
                            class="text-center sortable col-{{ column.index }}">
                            {{ column.title }}
                            &nbsp;
                            <span ng-if="column.sortable" class="bi-chevron-down"></span>
                        </th>
                        <th class="col-save"></th>
                    </tr>
                    <tr>
                        <th ng-repeat="column in columns track by $index" ng-show="column.visible">

                            <div ng-if="column.filter != false" class="input-group input-group-solid mb-5">
                                <span class="input-group-text" id="basic-addon1">
                                    <i class="ki-duotone ki-filter fs-3"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                 <input ng-if="column.filter != false" ng-model="params.filter()[column.index]" type="text" name="{{ column.index }}" value="" class="form-control form-control-solid input-sm border-0" />

                            </div>

                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr editable-row ng-repeat="translation in $data track by $index" translation="translation" columns="columns" edit-type="editType"></tr>
                </tbody>
            </table>
            <div class="alert alert-info" role="alert" ng-if="tableParams.total() < 1">
                {{ labels.noTranslations }}
            </div>
        </div>
    </div>

    <script type="text/ng-template" id="pager-template">
        <div class="ng-cloak ng-table-pager">
            <ul class="pagination ng-table-pagination pull-right">
                <li class="page-item" ng-class="{'active': !page.active}" ng-repeat="page in pages track by $index" ng-switch="page.type">
                    <a class="page-link" ng-switch-when="prev" ng-click="params.changePage(page.number)" href="">&laquo;</a>
                    <a class="page-link" ng-switch-when="first" ng-click="params.changePage(page.number)" href=""><span ng-bind="page.number"></span></a>
                    <a class="page-link" ng-switch-when="page" ng-click="params.changePage(page.number)" href=""><span ng-bind="page.number"></span></a>
                    <a class="page-link" ng-switch-when="more" ng-click="params.changePage(page.number)" href="">&#8230;</a>
                    <a class="page-link" ng-switch-when="last" ng-click="params.changePage(page.number)" href=""><span ng-bind="page.number"></span></a>
                    <a class="page-link" ng-switch-when="next" ng-click="params.changePage(page.number)" href="">&raquo;</a>
                </li>
            </ul>
        </div>
    </script>

    <script type="text/ng-template" id="editable-row-template">
        <td ng-repeat="column in columns track by $index" ng-show="column.visible" ng-dblclick="enableMode('edit')">
            <span ng-show="!column.edit || (column.edit && mode != 'edit')">{{ translation[column.index] }}</span>
            <div ng-switch on="editType">
                <textarea ng-switch-when="textarea"
                       ng-if="column.edit"
                       ng-show="mode == 'edit'"
                       ng-model="translation[column.index]"
                       ng-keydown="save($event, 'textarea')"
                       name="column.index"
                       class="form-control">
                </textarea>
                <input ng-switch-default
                       ng-if="column.edit"
                       ng-show="mode == 'edit'"
                       ng-model="translation[column.index]"
                       ng-keydown="save($event, 'input')"
                       type="text"
                       name="column.index"
                       class="form-control input-sm" />
            </div>
            <div class="text-center">
                <button ng-show="mode == 'delete' && column.delete && translation[column.index]" type="button" class="btn btn-link delete" ng-click="delete(column)">
                    <i class="bi-trash text-danger"></i>
                </button>
            </div>
        </td>
        <td class="text-center">
            <div class="actions ">
                <button ng-show="!mode" ng-click="enableMode('edit')" type="button" class="btn btn-icon btn-light-warning btn-sm">
                    <i class="bi-pencil-fill"></i>
                </button>
                <button ng-show="!mode" ng-click="enableMode('delete')" type="button" class="btn btn-icon btn-light-danger btn-sm">
                    <span class="bi-trash"></span>
                </button>
                <button ng-show="mode == 'edit'" ng-click="save($event, 'btn-save')" type="button" class="btn btn-icon btn-light-success btn-sm">
                    <span class="bi-save"></span>
                </button>
                <button ng-show="mode != null" ng-click="disableMode()" type="button" class="btn btn-icon btn-light-warning btn-sm">
                    <span class="bi-box-arrow-in-right"></span>
                </button>
            </div>
        </td>
    </script>
</div>
{% endverbatim %}