<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezyadmin}">

<body>
<div layout:fragment="content" class="row">
    <div class="col-12">
        <table id="adminRoleList" class="table table-bordered table-hover bg-white align-middle-cells">
            <thead>
            <tr>
                <th>#</th>
                <th>[[#{name}]]</th>
                <th>[[#{display_name}]]</th>
                <th class="text-center">[[#{priority}]]</th>
                <th class="text-center">[[#{admins}]]</th>
                <th class="text-center">[[#{created_at}]]</th>
                <th class="text-center">[[#{actions}]]</th>
            </tr>
            </thead>
            <tbody id="adminRoleListBody">
            </tbody>
        </table>
    </div>
</div>
<th:block layout:fragment="modals">
    <th:block th:replace="~{modals/add-new-role :: content}" />
    <th:block th:replace="~{modals/edit-role :: content}" />
    <th:block th:replace="~{fragments/prompt :: content(id='delete-admin-role-modal', title=confirm, confirmButton=delete, closeButton=close)}" />
</th:block>
<script layout:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.accessibleUris['/admins/roles/{roleName}'] = /*[[${adminRoles.isAccessible('/admins/roles/{roleName}')}]]*/;
ezyadmin.accessibleUris['/api/v1/admin/role-names/{roleName}'] = /*[[${adminRoles.isAccessible('/api/v1/admin/role-names/{roleName}', 'DELETE')}]]*/;
ezyadmin.accessibleUris['/api/v1/admin/role-names/{roleNameId}'] = /*[[${adminRoles.isAccessible('/api/v1/admin/role-names/{roleNameId}', 'PUT')}]]*/;
ezyadmin.messages.do_you_want_to_delete_role = /*[[#{do_you_want_to_delete_role}]]*/;
/*]]>*/

// ========== roles init =============
ezyadmin.onNewButtonClick = function() {
    $('#add-new-role-modal').modal('show');
}

// ========== role list =============
ezyadmin.roleDataById = {};
ezyadmin.fetchAdminRoleList = function() {
    $.ajax({
        url: '/api/v1/admin/roles',
        type: 'GET',
        dataType: 'json'
    })
    .done(function(data) {
        data.forEach((item) => {
            ezyadmin.roleDataById[item.id] = item;
        });
        ezyadmin.renderAdminRoleListTable(data);
    })
    .fail(function(e) {
        ezyadmin.processGetApiErrors(e);
    });
}

ezyadmin.renderAdminRoleListTable = function(adminRoleList) {
    var html = ezyadmin.buildAdminRoleListBodyHtml(adminRoleList);
    ezyadmin.destroyDataTableIfExists('adminRoleList');
    $('#adminRoleListBody').html(html);
    ezyadmin.createDataTable('adminRoleList', 12);
}

ezyadmin.buildAdminRoleListBodyHtml = function(adminRoleList) {
    var html = '';
    adminRoleList.forEach((role, index) => {
        html += ezyadmin.buildAdminRoleListItemHtml(role, index);
    });
    return html;
}

ezyadmin.buildAdminRoleListItemHtml = function(role, index) {
    var html = `
        <tr>
            <td>${index + 1}</td>
            <td>${role.name}</td>
            <td>
                <a href="/admins/roles/${role.name}${ezyadmin.lang ? `?lang=${ezyadmin.lang}` : ''}">
                    ${role.displayName}
                </a>
            </td>
            <td class="text-center">${ezyadmin.formatNumberWithCommas(role.priority)}</td>
            <td class="text-center">${ezyadmin.formatNumberWithCommas(role.admins)}</td>
            <td class="text-center">${ezyadmin.formatTimeStamp(role.createdAt)}</td>
            <td class="text-center">
                ${ezyadmin.accessibleUris['/admins/roles/{roleName}'] ? `
                    <a class="btn btn-link pr-1" href="/admins/roles/${role.name}${ezyadmin.lang ? `?lang=${ezyadmin.lang}` : ''}">
                        <i class="fas fa-eye text-primary"></i>
                    </a>
                ` : ''}
                ${role.name !== 'super_admin' && role.name !== 'devops' &&
                ezyadmin.accessibleUris['/api/v1/admin/role-names/{roleNameId}'] ? `
                    <button type="button" class="btn btn-link px-1" onclick="ezyadmin.onEditAdminRoleButtonClick(${role.id});">
                        <i class="fas fa-edit text-info"></i>
                    </button>
                ` : ''}
                ${role.name !== 'super_admin' && role.name !== 'devops' &&
                ezyadmin.accessibleUris['/api/v1/admin/role-names/{roleName}'] ? `
                    <button type="button" class="btn btn-link pl-1" onclick="ezyadmin.onDeleteAdminRole('${role.name}');">
                        <i class="text-danger fas fa-trash"></i>
                    </button>
                ` : ''}
            </td>
        </tr>
        `;
	return html;
}

ezyadmin.fetchAdminRoleList();

// ==================== add new role ============
ezyadmin.addNewRoleApi = {
    url: '/api/v1/admin/role-names/add',
    onSuccess: function() {
        ezyadmin.fetchAdminRoleList('current');
    }
};

// ==================== edit role ============
ezyadmin.onEditAdminRoleButtonClick = function(roleId) {
    ezyadmin.editRoleApi = {
        url: '/api/v1/admin/role-names/' + roleId,
        onSuccess: function() {
            ezyadmin.fetchAdminRoleList('current');
        }
    };
    ezyadmin.showEditRoleModal(roleId);
}

// ==================== delete a role ============
ezyadmin.onDeleteAdminRole = function(roleName) {
    ezyadmin.selectedRoleName = roleName;
    $('#delete-admin-role-modal-body-content')
        .text(ezyadmin.messages.do_you_want_to_delete_role.replace('{0}', roleName));
    $('#delete-admin-role-modal').modal('show');
}

ezyadmin.onPromptConfirmed = function(modalId) {
    if (modalId == 'delete-admin-role-modal') {
        ezyadmin.deleteAdminRole();
    }
}

ezyadmin.deleteAdminRole = function() {
    $.ajax({
        type: 'DELETE',
        url: '/api/v1/admin/role-names/' + ezyadmin.selectedRoleName,
        success: function () {
            ezyadmin.fetchAdminRoleList('current');
            $('#delete-admin-role-modal').modal('hide');
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors({}, data);
        }
    });
}
</script>
<th:block layout:fragment="post-scripts">
    <th:block th:replace="~{modals/add-new-role :: scripts}" />
    <th:block th:replace="~{modals/edit-role :: scripts}" />
</th:block>
</body>
</html>
