{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-pages.css"}}">

{{template "admin-hero-styles" .}}

<details class="admin-hero">
    <summary class="admin-hero-bar">
        <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-trash'></i></span>
        <span class="admin-hero-intro">{{T "admin_recycle_page_hint"}}</span>
        <span class="admin-hero-toggle">
            <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
            {{template "admin-hero-help-meta" .}}
        </span>
    </summary>
    <div class="admin-hero-body">
        <ul class="admin-hero-field-grid">
            <li class="admin-hero-field-item"><strong>{{T "admin_recycle_usage_list"}}</strong>{{T "admin_recycle_usage_list_desc"}}</li>
            <li class="admin-hero-field-item"><strong>{{T "admin_recycle_usage_restore"}}</strong>{{T "admin_recycle_usage_restore_desc"}}</li>
            <li class="admin-hero-field-item"><strong>{{T "admin_recycle_usage_purge"}}</strong>{{T "admin_recycle_usage_purge_desc"}}</li>
        </ul>
    </div>
</details>

<div class="card">
    <div class="card-header">
        <div class="d-flex gap-2 align-items-center flex-wrap">
            <div class="flex-grow-1" style="min-width: 200px;">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class='bx bx-search'></i></span>
                    <input type="text" class="form-control form-control-sm" id="searchKeyword" placeholder="{{T "admin_recycle_search_placeholder"}}" value="{{.Data.Keyword}}">
                </div>
            </div>
            <div style="min-width: 100px;">
                <select class="form-select form-select-sm" id="pageSizeSelect" title="{{T "admin_documents_per_page"}}">
                    <option value="20" {{if eq .Data.PageSize 20}}selected{{end}}>20</option>
                    <option value="50" {{if eq .Data.PageSize 50}}selected{{end}}>50</option>
                    <option value="100" {{if eq .Data.PageSize 100}}selected{{end}}>100</option>
                </select>
            </div>
            <button type="button" class="btn btn-outline-primary btn-sm" id="btnRecycleSearch">
                <i class='bx bx-search'></i> {{T "admin_btn_search"}}
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnRecycleReset">
                <i class='bx bx-reset'></i> {{T "admin_documents_reset_filter"}}
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="d-flex gap-3 flex-wrap mb-3 small">
            <span class="badge bg-secondary px-3 py-2">{{T "admin_recycle_stats_total"}}: {{.Data.TotalRecords}}</span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th width="40"><input type="checkbox" id="selectAll" title="{{T "admin_documents_select_all"}}"></th>
                        <th width="60">{{T "admin_documents_col_id"}}</th>
                        <th>{{T "admin_col_title"}}</th>
                        <th>{{T "admin_documents_col_dir"}}</th>
                        <th width="100">{{T "admin_documents_col_audit"}}</th>
                        <th>{{T "admin_col_updated"}}</th>
                        <th width="60" class="text-center">{{T "admin_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody>
                    {{if .Data.Documents}}
                    {{range .Data.Documents}}
                    <tr data-id="{{.id}}" data-title="{{.title}}">
                        <td><input type="checkbox" class="recycle-checkbox" value="{{.id}}" data-title="{{.title}}"></td>
                        <td>{{.id}}</td>
                        <td>
                            <strong>{{.title}}</strong>
                            {{if .slug}}<div class="small text-muted text-truncate" style="max-width:280px;" title="{{.slug}}">{{.slug}}</div>{{end}}
                        </td>
                        <td>
                            {{if .directory_path}}
                            <span class="badge bg-info text-wrap text-start lh-sm">{{.directory_path}}</span>
                            {{else}}
                            <span class="text-muted">-</span>
                            {{end}}
                        </td>
                        <td>
                            {{if eq .audit_status 0}}<span class="badge bg-warning text-dark">{{T "admin_status_pending"}}</span>
                            {{else if eq .audit_status 2}}<span class="badge bg-danger">{{T "admin_status_rejected"}}</span>
                            {{else}}<span class="badge bg-success">{{T "admin_status_approved"}}</span>{{end}}
                        </td>
                        <td class="doc-table-col-meta">{{if .updated_at_str}}{{.updated_at_str}}{{else}}-{{end}}</td>
                        <td class="text-center">
                            <div class="dropdown table-action-dropdown">
                                <button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item recycle-action-restore" href="javascript:;" data-id="{{.id}}" data-title="{{.title}}"><i class="bx bx-undo"></i> {{T "admin_recycle_btn_restore"}}</a></li>
                                    <li><a class="dropdown-item text-danger recycle-action-purge" href="javascript:;" data-id="{{.id}}" data-title="{{.title}}"><i class="bx bx-trash"></i> {{T "admin_recycle_btn_purge"}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                    {{else}}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class='bx bx-trash' style="font-size: 3rem;"></i>
                            <div class="mt-2">{{T "admin_recycle_empty"}}</div>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>

        {{if gt .Data.TotalPages 1}}
        <nav aria-label="Pagination">
            <ul class="pagination justify-content-center">
                {{$currentPage := .Data.Page}}
                {{$totalPages := .Data.TotalPages}}
                {{$prevPage := sub $currentPage 1}}
                {{$nextPage := add $currentPage 1}}
                {{$qs := .Data.QuerySuffix}}
                {{if gt $currentPage 1}}
                <li class="page-item">
                    <a class="page-link" href="/admin/document-recycle?page=1&{{$qs}}"><i class='bx bx-first-page'></i> {{T "admin_pagination_first"}}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="/admin/document-recycle?page={{$prevPage}}&{{$qs}}"><i class='bx bx-chevron-left'></i> {{T "admin_pagination_prev"}}</a>
                </li>
                {{end}}
                <li class="page-item disabled">
                    <span class="page-link">{{T "admin_pagination_page"}} {{$currentPage}} / {{$totalPages}}, {{.Data.TotalRecords}} {{T "admin_pagination_records_unit"}}</span>
                </li>
                {{if lt $currentPage $totalPages}}
                <li class="page-item">
                    <a class="page-link" href="/admin/document-recycle?page={{$nextPage}}&{{$qs}}">{{T "admin_pagination_next"}} <i class='bx bx-chevron-right'></i></a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="/admin/document-recycle?page={{$totalPages}}&{{$qs}}">{{T "admin_pagination_last"}} <i class='bx bx-last-page'></i></a>
                </li>
                {{end}}
            </ul>
        </nav>
        {{end}}
    </div>
</div>

<div id="batchActionBar" class="batch-action-bar" style="display: none;">
    <div class="batch-action-content">
        <div class="batch-action-info">
            {{T "admin_documents_bulk_selected"}} <span id="selectedCount">0</span> {{T "admin_documents_bulk_selected_unit"}}
        </div>
        <div class="batch-action-buttons">
            <button type="button" class="btn btn-sm btn-outline-primary" id="btnBatchRestore">
                <i class='bx bx-undo'></i> {{T "admin_recycle_btn_restore"}}
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger" id="btnBatchPurge">
                <i class='bx bx-trash'></i> {{T "admin_recycle_btn_purge"}}
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btnClearSelection">
                <i class='bx bx-x'></i> {{T "admin_documents_clear_selection"}}
            </button>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var RecyclePageI18n = {
    selectRestore: {{json (T "admin_recycle_select_restore")}},
    selectPurge: {{json (T "admin_recycle_select_purge")}},
    restoreConfirm: {{json (T "admin_recycle_restore_confirm")}},
    purgeConfirm: {{json (T "admin_recycle_purge_confirm")}},
    purgeWarn: {{json (T "admin_recycle_purge_warn")}},
    batchRestoreConfirm: {{json (T "admin_recycle_batch_restore_confirm")}},
    batchPurgeConfirm: {{json (T "admin_recycle_batch_purge_confirm")}},
    restoredOk: {{json (T "admin_recycle_restored_ok")}},
    purgedOk: {{json (T "admin_recycle_purged_ok")}},
    restoreFailed: {{json (T "admin_recycle_restore_failed")}},
    purgeFailed: {{json (T "admin_recycle_purge_failed")}},
    requestFailed: {{json (T "admin_request_failed")}},
    sessionExpired: {{json (T "admin_documents_session_expired")}},
    goLogin: {{json (T "admin_documents_go_login")}},
    loginTitle: {{json (T "admin_documents_login_title")}},
    btnRestore: {{json (T "admin_recycle_btn_restore")}},
    btnPurge: {{json (T "admin_recycle_btn_purge")}},
    btnCancel: {{json (T "admin_btn_cancel")}},
    confirmRestore: {{json (T "admin_recycle_confirm_restore")}},
    confirmPurge: {{json (T "admin_recycle_confirm_purge")}}
};
function recycleI18n(tpl, vars) {
    var s = tpl || '';
    if (vars) {
        Object.keys(vars).forEach(function(k) {
            s = s.replace(new RegExp('\\{' + k + '\\}', 'g'), vars[k]);
        });
    }
    return s;
}
function showRecycleLoginConfirm(msg) {
    BootstrapModal.confirm(msg || RecyclePageI18n.sessionExpired, {
        icon: 3,
        title: RecyclePageI18n.loginTitle,
        btn: [RecyclePageI18n.goLogin, RecyclePageI18n.btnCancel]
    }, function() {
        location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
    });
}
function buildRecycleQuery(extra) {
    var q = [];
    var keyword = (extra && extra.keyword !== undefined) ? extra.keyword : ($('#searchKeyword').val() || '');
    var pageSize = (extra && extra.page_size !== undefined) ? extra.page_size : ($('#pageSizeSelect').val() || 20);
    var page = (extra && extra.page !== undefined) ? extra.page : 1;
    if (keyword) q.push('keyword=' + encodeURIComponent(keyword));
    q.push('page_size=' + encodeURIComponent(pageSize));
    q.push('page=' + encodeURIComponent(page));
    return q.join('&');
}
function getSelectedRecycleIds() {
    var ids = [];
    $('.recycle-checkbox:checked').each(function() { ids.push(parseInt($(this).val(), 10)); });
    return ids;
}
function updateRecycleSelectionBar() {
    var count = $('.recycle-checkbox:checked').length;
    $('#selectedCount').text(count);
    if (count > 0) {
        $('#batchActionBar').slideDown(200);
    } else {
        $('#batchActionBar').slideUp(200);
    }
    var total = $('.recycle-checkbox').length;
    $('#selectAll').prop('checked', total > 0 && count === total);
}
function postRecycleJSON(url, payload, okMsg, failMsg) {
    $.ajax({
        url: url,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(payload),
        dataType: 'json',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        success: function(res) {
            if (res.success) {
                BootstrapModal.msg(res.message || okMsg, {icon: 1}, function() { location.reload(); });
            } else if (res.require_login) {
                showRecycleLoginConfirm(res.message);
            } else {
                BootstrapModal.msg(res.message || failMsg, {icon: 2});
            }
        },
        error: function(xhr) {
            if (xhr.status === 401 || xhr.status === 403) {
                showRecycleLoginConfirm();
            } else {
                BootstrapModal.msg(RecyclePageI18n.requestFailed, {icon: 2});
            }
        }
    });
}
function restoreDocument(id, title) {
    BootstrapModal.confirm(recycleI18n(RecyclePageI18n.restoreConfirm, {title: title}), {
        icon: 3,
        title: RecyclePageI18n.confirmRestore,
        btn: [RecyclePageI18n.btnRestore, RecyclePageI18n.btnCancel]
    }, function(index) {
        BootstrapModal.close(index);
        postRecycleJSON('/admin/document-restore', {id: parseInt(id, 10)}, RecyclePageI18n.restoredOk, RecyclePageI18n.restoreFailed);
    });
}
function purgeDocument(id, title) {
    BootstrapModal.confirm(
        recycleI18n(RecyclePageI18n.purgeConfirm, {title: title}) + '<br><span class="text-danger">' + RecyclePageI18n.purgeWarn + '</span>',
        {
            icon: 3,
            title: RecyclePageI18n.confirmPurge,
            btn: [RecyclePageI18n.btnPurge, RecyclePageI18n.btnCancel]
        },
        function(index) {
            BootstrapModal.close(index);
            postRecycleJSON('/admin/document-purge', {id: parseInt(id, 10)}, RecyclePageI18n.purgedOk, RecyclePageI18n.purgeFailed);
        }
    );
}
$(function() {
    $('#btnRecycleSearch').on('click', function() {
        location.href = '/admin/document-recycle?' + buildRecycleQuery({page: 1});
    });
    $('#btnRecycleReset').on('click', function() {
        location.href = '/admin/document-recycle';
    });
    $('#searchKeyword').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            $('#btnRecycleSearch').click();
        }
    });
    $('#pageSizeSelect').on('change', function() {
        location.href = '/admin/document-recycle?' + buildRecycleQuery({page: 1, page_size: $(this).val()});
    });
    $('#selectAll').on('change', function() {
        $('.recycle-checkbox').prop('checked', $(this).is(':checked'));
        updateRecycleSelectionBar();
    });
    $(document).on('change', '.recycle-checkbox', updateRecycleSelectionBar);
    $('#btnClearSelection').on('click', function() {
        $('.recycle-checkbox, #selectAll').prop('checked', false);
        updateRecycleSelectionBar();
    });
    $(document).on('click', '.recycle-action-restore', function(e) {
        e.preventDefault();
        restoreDocument($(this).data('id'), $(this).data('title'));
    });
    $(document).on('click', '.recycle-action-purge', function(e) {
        e.preventDefault();
        purgeDocument($(this).data('id'), $(this).data('title'));
    });
    $('#btnBatchRestore').on('click', function() {
        var ids = getSelectedRecycleIds();
        if (!ids.length) {
            BootstrapModal.msg(RecyclePageI18n.selectRestore, {icon: 2});
            return;
        }
        BootstrapModal.confirm(recycleI18n(RecyclePageI18n.batchRestoreConfirm, {count: ids.length}), {
            icon: 3,
            title: RecyclePageI18n.confirmRestore,
            btn: [RecyclePageI18n.btnRestore, RecyclePageI18n.btnCancel]
        }, function(index) {
            BootstrapModal.close(index);
            postRecycleJSON('/admin/document-batch-restore', {ids: ids}, RecyclePageI18n.restoredOk, RecyclePageI18n.restoreFailed);
        });
    });
    $('#btnBatchPurge').on('click', function() {
        var ids = getSelectedRecycleIds();
        if (!ids.length) {
            BootstrapModal.msg(RecyclePageI18n.selectPurge, {icon: 2});
            return;
        }
        BootstrapModal.confirm(
            recycleI18n(RecyclePageI18n.batchPurgeConfirm, {count: ids.length}) + '<br><span class="text-danger">' + RecyclePageI18n.purgeWarn + '</span>',
            {
                icon: 3,
                title: RecyclePageI18n.confirmPurge,
                btn: [RecyclePageI18n.btnPurge, RecyclePageI18n.btnCancel]
            },
            function(index) {
                BootstrapModal.close(index);
                postRecycleJSON('/admin/document-batch-purge', {ids: ids}, RecyclePageI18n.purgedOk, RecyclePageI18n.purgeFailed);
            }
        );
    });
});
</script>
{{end}}