wazuh-kibana-app/public/directives/wz-list-manage/wz-list-manage.html

<div layout="column" layout-align="start">
    <div layout="row" ng-class="hideClose ? ['wz-margin-top-8', 'md-padding-h'] : ''">
        <span ng-if="!hideClose" ng-click='closeFn()' class='btn btn-info wz-margin-right-8'>Cancel</span>
        <button ng-disabled='items.length === 0 || (currentList.new && !currentList.newName) || doingSaving' ng-click='saveList()'
            class='btn wz-button pull-right'>
            <span><i aria-hidden='true' class='fa fa-fw fa-save' ng-class="doingSaving ? 'fa-spin fa-spinner' : ''"></i>Save
                list</span>
        </button>
        <input ng-show="currentList.new" placeholder="Enter new list name" ng-model="currentList.newName" type="text"
            class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid wz-margin-left-8" aria-invalid="false">
        <div ng-show="restartMsg" class="confirmEmbedBubble confirmEmbedBubbleInline">
            <span class="wz-padding-top-10 wz-padding-left-8">Configuration is not applied yet. Do you want
                to restart to apply it?</span>
            <button class="btn cancelBtn btn-info md-padding-h" type="button" ng-click="restartMsg = false">I
                will do it later</button>
            <button class="btn wz-button" type="button" ng-disabled="doingSaving" ng-click="restart(); restartMsg = false">Restart
                now</button>
        </div>
    </div>
    <div layout="row" ng-class="hideClose ? ['wz-padding-left-8', 'wz-padding-right-8'] : ['wz-padding-top-14']"
        layout-align="start stretch">
        <md-card flex class="wz-md-card" ng-class="{ 'wz-no-margin' : !hideClose }">
            <md-card-content>
                <div layout="row">
                    <input placeholder="Filter entries..." ng-model="searchTerm" ng-change="filterTable()" type="text"
                        class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid height-40">
                </div>
                <table class="table table-striped table-condensed table-layout-fixed table-hover table-vertical-align-middle">
                    <thead class="wz-text-bold">
                        <th class="wz-text-left">Key</th>
                        <th class="wz-text-left">Value</th>
                        <th class="wz-text-left">Actions</th>
                    </thead>
                    <tbody>
                        <tr ng-if="adminMode">
                            <td><input placeholder="Key" type="text" class="wz-input-text" ng-model="newKey"></input></td>
                            <td><input placeholder="Value" type="text" class="wz-input-text" ng-model="newValue"></input></td>
                            <td><button class="btn btn-primary btn-as-i" ng-disabled="!newKey" ng-click="addEntry(newKey, newValue);newKey = ''; newValue = ''"
                                    tooltip="Add new entry" tooltip-placement="right">
                                    <i class="fa fa-fw fa-plus" style="width:15px"></i></button></td>
                        </tr>
                        <tr class="wz-word-wrap" ng-repeat="item in pagedItems[currentPage] track by $index" ng-style="editingKey === item[0] && {'background': '#e2f7ff'}">
                            <td>{{item[0]}}</td>
                            <td>
                                <input ng-show="editingKey === item[0]" ng-disabled="loadingChange" type="text" class="wz-input-text"
                                    ng-model="currentList.editingNewValue"></input>
                                <span ng-show="!editingKey || editingKey !== item[0]">{{item[1]}}</span>
                            </td>
                            <td class="action-btn-td">
                                <div ng-hide="!adminMode">
                                    <span ng-show="(!editingKey || editingKey !== item[0]) && removingEntry !== item[0]"
                                        tooltip="Edit" ng-click="setEditingKey(item[0], item[1])" class="fa fa-fw fa-pencil cursor-pointer"></span>
                                    <span ng-show="editingKey === item[0] && !loadingChange" tooltip="Cancel" class="fa fa-fw fa-times cursor-pointer"
                                        ng-click="cancelEditingKey()"></span>
                                    <span ng-show="editingKey === item[0] && currentList.editingNewValue !== '' && !loadingChange"
                                        tooltip="Apply" class="fa fa-fw fa-success cursor-pointer" ng-click="editKey(item[0])"></span>
                                    <span ng-show="editingKey === item[0] && loadingChange"><i class="fa fa-fw fa-spin fa-spinner"></i></span>
                                    <i ng-if="(!removingEntry || removingEntry !== item[0]) && editingKey !== item[0]"
                                        ng-click="showConfirmRemoveEntry($event, item[0]); $event.stopPropagation()"
                                        class="fa fa-fw fa-trash cursor-pointer" tooltip="Remove this entry"
                                        tooltip-placement="left" aria-hidden="true"></i>

                                    <div ng-if="removingEntry === item[0]" class="confirmEmbedBubble">
                                        <div layout="row">
                                            <span class="font-size-12 wz-padding-left-8">This entry will be
                                                removed</span>
                                        </div>
                                        <div layout="row">
                                            <md-button class="cancelBtn" type="button" ng-click="cancelRemoveEntry()"><i
                                                    aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button>
                                            <md-button class="agreeBtn" type="button" ng-click="confirmRemoveEntry(item[0])"><i
                                                    aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <td colspan="3">
                            <span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items</span>
                            <div ng-show="items.length >= itemsPerPage" class="pagination pull-right" style="margin:0 !important">
                                <ul layout="row">
                                    <li ng-show="currentPage" class="md-padding">
                                        <a href ng-click="prevPage()">« Prev</a>
                                    </li>

                                    <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                                        ng-class="{'wz-text-active': n == currentPage}" ng-click="setPage()" class="md-padding">
                                        <a href ng-bind="n + 1">1</a>
                                    </li>

                                    <li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
                                        <a href ng-click="nextPage()">Next »</a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tfoot>
                </table>
            </md-card-content>
        </md-card>
    </div>
</div>