<!--
 ~ 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:th="http://www.thymeleaf.org">
<body>
<style th:fragment="styles">
    .recent-access-list {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 6px;
        overflow: hidden;
    }
    .recent-access-item {
        color: inherit;
        display: flex;
        gap: 14px;
        padding: 16px 18px;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }
    .recent-access-item:hover {
        background: #f8f9fa;
        color: inherit;
        text-decoration: none;
    }
    .recent-access-item:last-child {
        border-bottom: 0;
    }
    .recent-access-icon {
        align-items: center;
        background: rgba(0, 123, 255, .1);
        border-radius: 50%;
        color: #007bff;
        display: flex;
        flex: 0 0 36px;
        height: 36px;
        justify-content: center;
        width: 36px;
    }
    .recent-access-content {
        min-width: 0;
        width: 100%;
    }
    .recent-access-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 6px;
    }
    .recent-access-uri {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .recent-access-feature {
        background: #f4f6f9;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 12px;
        color: #495057;
        display: inline-block;
        font-size: 12px;
        line-height: 1;
        padding: 5px 9px;
    }
    .recent-access-empty {
        background: #fff;
        border: 1px dashed rgba(0, 0, 0, .16);
        border-radius: 6px;
        color: #6c757d;
        padding: 28px 16px;
        text-align: center;
    }
    @media (max-width: 575.98px) {
        .recent-access-item {
            padding: 14px;
        }
        .recent-access-icon {
            display: none;
        }
    }
    .dark-mode .recent-access-list {
        background: var(--ezy-dark-surface);
        border: 1px solid var(--ezy-dark-border);
    }
    .dark-mode .recent-access-item {
        border-bottom: 1px solid var(--ezy-dark-border);
    }
    .dark-mode .recent-access-item:hover {
        background: var(--ezy-dark-surface-hover);
    }
    .dark-mode .recent-access-icon {
        background: var(--ezy-dark-link-bg);
        color: var(--ezy-dark-link);
    }
    .dark-mode .recent-access-feature {
        background: #3f474e;
        border: 1px solid var(--ezy-dark-border);
        color: var(--ezy-dark-text);
    }
    .dark-mode .recent-access-empty {
        background: var(--ezy-dark-surface);
        border: 1px dashed var(--ezy-dark-border);
        color: var(--ezy-dark-muted);
    }
</style>
<th:block th:fragment="content">
    <div class="col-12">
        <div class="d-flex justify-content-end mb-2">
            <span class="text-muted">
                <span id="adminActivityCountText">0</span>
                [[${#strings.toLowerCase(#messages.msg('of'))}]]
                <span id="totalAdminActivityText">0</span>
                [[${#strings.toLowerCase(#messages.msg('activities'))}]]
            </span>
        </div>
        <div id="adminActivityListBody" class="recent-access-list">
        </div>
        <div id="adminActivityEmptyList" class="recent-access-empty d-none">
            [[#{data_table.empty_table}]]
        </div>
        <div class="text-center mt-3 mb-4">
            <button class="btn btn-primary pl-5 pr-5 d-none" id="loadMoreAdminActivityButton">
                [[#{load_more}]]
            </button>
        </div>
    </div>
</th:block>
<script th:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.messages.home = /*[[#{home}]]*/;
/*]]>*/

// ========== admin activity load more =============
$('#loadMoreAdminActivityButton').click(() => {
    ezyadmin.fetchAdminActivityList('next');
});

// ========== admin activity list =============
ezyadmin.fetchAdminActivityList = function(action) {
    var loadMore = action == 'next';
    var queryString = '&uriType=VIEW&urisExclusive=/,/recent-access';
    if (ezyadmin.adminActivitySearchKeyword) {
        queryString += '&keyword=' + encodeURIComponent(ezyadmin.adminActivitySearchKeyword);
    }
    if (ezyadmin.adminActivitySearchHttpMethod) {
        queryString += '&method=' + encodeURIComponent(ezyadmin.adminActivitySearchHttpMethod);
    }
    if (ezyadmin.adminActivitySearchUriType) {
        queryString += '&uriType=' + encodeURIComponent(ezyadmin.adminActivitySearchUriType);
    }
    if (ezyadmin.adminActivitySearchCreatedAtStartInclusive) {
        queryString += '&createdAtStartInclusive=' + ezyadmin.adminActivitySearchCreatedAtStartInclusive;
    }
    if (ezyadmin.adminActivitySearchCreatedAtEndInclusive) {
        queryString += '&createdAtEndInclusive=' + ezyadmin.adminActivitySearchCreatedAtEndInclusive;
    }
    if (loadMore) {
        if (ezyadmin.lastAdminActivityPageToken && ezyadmin.lastAdminActivityPageToken.next) {
            queryString += '&nextPageToken=' + encodeURIComponent(ezyadmin.lastAdminActivityPageToken.next);
        } else {
            return;
        }
    }
    var requestUri = '/api/v1/admins/me/activities';
    var limit = ezyadmin.adminActivitySearchLimit || 30;
    ezyadmin.showLoadingScreen();
    $('#loadMoreAdminActivityButton').prop('disabled', true);
    $.ajax({
        url: requestUri + '?limit=' + limit + queryString,
        type: 'GET',
        dataType: 'json'
    })
    .done(function(data) {
        ezyadmin.hideLoadingScreen();
        $('#totalAdminActivityText').text(ezyadmin.formatTotalResults(data.total));
        ezyadmin.lastAdminActivityPageToken = data.pageToken;
        var html = ezyadmin.buildAdminActivityListBodyHtml(data.items);
        if (loadMore) {
            $('#adminActivityListBody').append(html);
        } else {
            $('#adminActivityListBody').html(html);
        }
        ezyadmin.updateAdminActivityListState(data);
    })
    .fail(function(e) {
        ezyadmin.hideLoadingScreen();
        $('#loadMoreAdminActivityButton').prop('disabled', false);
        ezyadmin.processGetApiErrors(e);
    });
}

ezyadmin.buildAdminActivityListBodyHtml = function(adminActivities) {
    var html = '';
    adminActivities.forEach((adminActivity) => {
        html += ezyadmin.buildAdminActivityListItemHtml(adminActivity);
    });
    return html;
}

ezyadmin.viewNameByUri = {
    '/': ezyadmin.messages.home
};
ezyadmin.buildAdminActivityListItemHtml = function(adminActivity) {
    var rawUri = adminActivity.uri || '';
    var uri = ezyadmin.escapeHtml(rawUri);
    var uriText = ezyadmin.escapeHtml(ezyadmin.viewNameByUri[rawUri] || rawUri);
    var featureHtml = adminActivity.feature
        ? `<span class="recent-access-feature">${ezyadmin.escapeHtml(ezyadmin.getI18nMessage(adminActivity.feature || ''))}</span>`
        : '';
    var html = `
        <a class="recent-access-item admin-activity-list-item" href="${uri}">
            <div class="recent-access-icon">
                <i class="fas fa-link"></i>
            </div>
            <div class="recent-access-content">
                <div class="recent-access-meta">
                    <span class="text-muted small">
                        <i class="far fa-clock mr-1"></i>${ezyadmin.formatTimeStamp(adminActivity.createdAt)}
                    </span>
                    ${featureHtml}
                </div>
                <span class="recent-access-uri">${uriText}</span>
            </div>
        </a>
        `;
    return html;
}

ezyadmin.updateAdminActivityListState = function(data) {
    var count = $('.admin-activity-list-item').length;
    $('#adminActivityCountText').text(count);
    $('#adminActivityListBody').toggleClass('d-none', count == 0);
    $('#adminActivityEmptyList').toggleClass('d-none', count > 0);
    $('#loadMoreAdminActivityButton')
        .prop('disabled', false)
        .toggleClass('d-none', !data.continuation.hasNext);
}
ezyadmin.fetchAdminActivityList();
</script>
</body>
</html>
