i need to show only flag level  under 10
with button to lock and unlock this view 
<script>
            // ======================
            // Utility Functions
            // ======================

            function displayMessage(message, isError = false, isInfo = false) {
                const msgDiv = document.getElementById("message");
                msgDiv.textContent = message;
                msgDiv.className =
                    "message " +
                    (isError ? "error" : isInfo ? "info" : "success");
                if (isInfo) {
                    setTimeout(() => {
                        if (msgDiv.className.includes("info")) {
                            msgDiv.textContent = "";
                            msgDiv.className = "message";
                        }
                    }, 3000);
                }
            }

            function logoset(targetId, previewId = "imgPreview") {
                const stringText = window.imgsrc;
                const targetInput = document.getElementById(targetId);
                const previewDiv = document.getElementById(previewId);
                if (targetInput && typeof stringText !== "undefined") {
                    targetInput.value = stringText;
                    if (previewDiv) {
                        previewDiv.innerHTML = `<img src="${stringText}" alt="preview">`;
                    }
                }
            }

            function togglePassword(inputId, buttonId) {
                const input = document.getElementById(inputId);
                if (input) {
                    input.type =
                        input.type === "password" ? "text" : "password";
                    const button = document.getElementById(buttonId);
                    if (button)
                        button.textContent =
                            input.type === "password" ? "Show" : "Hide";
                }
            }

            async function postto(apiUrl = "", payload = {}) {
                try {
                    const response = await fetch(apiUrl, {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ data: payload }),
                    });
                    if (!response.ok) {
                        const errorData = await response
                            .json()
                            .catch(() => ({}));
                        throw new Error(
                            errorData.error ||
                                `HTTP error! status: ${response.status}`,
                        );
                    }
                    return await response.json();
                } catch (error) {
                    console.error("Request failed:", error);
                    displayMessage(error.message, true);
                    throw error;
                }
            }

            async function getData(url) {
                try {
                    const response = await fetch(url);
                    if (!response.ok)
                        throw new Error(
                            `HTTP error! status: ${response.status}`,
                        );
                    return await response.json();
                } catch (error) {
                    console.error("Get request failed:", error);
                    throw error;
                }
            }

            async function checkUsernameExists(username) {
                try {
                    const response = await postto(
                        "https://j.kunok.com/aui.php?action=check_username",
                        { username },
                    );
                    return response.exists;
                } catch (error) {
                    console.error("Check username error:", error);
                    return false;
                }
            }

            // ======================
            // Search Panel
            // ======================

            function showSearchPanel() {
                createPanel("searchPanel", "CC", "ctc", 400, 200, {
                    bodyContent: `
            <div class="control-row">
                <input type="text" id="searchUserId" placeholder="Enter User ID">
                <button onclick="searchUserById()">Search</button>
            </div>
            <div id="searchResult"></div>`,
                    noFooter: true,
                    title: "Search User by ID",
                });
            }

            async function searchUserById() {
                const userId = document
                    .getElementById("searchUserId")
                    .value.trim();
                if (!userId) {
                    displayMessage("Please enter a User ID", true);
                    return;
                }

                try {
                    displayMessage("Searching for user...", false, true);
                    const response = await getData(
                        `https://j.kunok.com/aui.php?action=list&id=${encodeURIComponent(userId)}`,
                    );
                    const user =
                        response.data && response.data.length
                            ? response.data[0]
                            : null;

                    if (!user) {
                        document.getElementById("searchResult").innerHTML =
                            '<p class="error">User not found</p>';
                        displayMessage("User not found", true);
                        return;
                    }

                    showUpdateUserPanel(userId);
                    closePanel("searchPanel");
                    displayMessage(
                        "User found, opening update panel",
                        false,
                        true,
                    );
                } catch (error) {
                    console.error("Search user error:", error);
                    document.getElementById("searchResult").innerHTML =
                        '<p class="error">Failed to search user</p>';
                    displayMessage("Failed to search user", true);
                }
            }

            // ======================
            // View Users Functions
            // ======================

            let currentItems = []; // Store current users for search/filter

            function showViewPanel() {
                document.getElementById("viewControls").style.display = "block";
                document.getElementById("viewTableContainer").style.display =
                    "block";
                document.getElementById("searchId").value = ""; // Clear search on open
                refreshView();
            }

            function closeViewPanel() {
                document.getElementById("viewControls").style.display = "none";
                document.getElementById("viewTableContainer").style.display =
                    "none";
                document.getElementById("loading").style.display = "none";
                displayMessage("");
            }

            async function refreshView() {
                try {
                    document.getElementById("loading").style.display = "block";
                    document.getElementById("viewContent").innerHTML = "";
                    displayMessage("Loading users...", false, true);

                    let data;

                    if (!navigator.onLine) {
                        // 📦 Offline: Load from localStorage
                        const cached = localStorage.getItem("cachedUsers");
                        if (cached) {
                            data = JSON.parse(cached);
                            displayMessage(
                                "Offline: Loaded from cache",
                                false,
                                true,
                            );
                        } else {
                            throw new Error(
                                "Offline and no cached data available.",
                            );
                        }
                    } else {
                        // 🌐 Online: Fetch from server
                        const response = await getData(
                            "https://j.kunok.com/aui.php?action=list",
                        );
                        if (response.error) throw new Error(response.error);
                        data = response.data;

                        // 💾 Save to localStorage
                        localStorage.setItem(
                            "cachedUsers",
                            JSON.stringify(data),
                        );
                        localStorage.setItem(
                            "lastSync",
                            JSON.stringify({
                                dateTime: new Date().toLocaleString(),
                                timestamp: Date.now(),
                            }),
                        );
                    }

                    currentItems = data;
                    displayPaginated(currentItems);
                    displayMessage(`Loaded ${currentItems.length} users`);
                } catch (error) {
                    displayMessage(error.message, true);
                    console.error("refreshView error:", error);
                } finally {
                    document.getElementById("loading").style.display = "none";
                }
            }

            function showLastSync() {
                const info = JSON.parse(
                    localStorage.getItem("lastSync") || "null",
                );
                if (!info) displayMessage("No sync info available", true);
                else
                    displayMessage(
                        `Last sync at ${info.dateTime} (timestamp: ${info.timestamp})`,
                        false,
                        true,
                    );
            }
            async function syncWithoutView() {
                try {
                    displayMessage("Syncing user data...", false, true);
                    const response = await getData(
                        "https://j.kunok.com/aui.php?action=list",
                    );
                    if (response.error) throw new Error(response.error);

                    localStorage.setItem(
                        "cachedUsers",
                        JSON.stringify(response.data),
                    );
                    localStorage.setItem(
                        "lastSync",
                        JSON.stringify({
                            dateTime: new Date().toLocaleString(),
                            timestamp: Date.now(),
                        }),
                    );

                    displayMessage(
                        `Sync complete: ${response.data.length} users cached`,
                    );
                } catch (error) {
                    console.error("Sync error:", error);
                    displayMessage("Error syncing user data", true);
                }
            }
            // =====================
            // 🔍 New View Search + Pagination + Sort
            // =====================
            let paginatedItems = [],
                currentPage = 1,
                itemsPerPage = 20,
                currentSortField = "id",
                sortAsc = true;

            function displayPaginated(data) {
                paginatedItems = [...data];
                sortAndRenderPage(1);
            }

            function sortAndRenderPage(page) {
                if (!paginatedItems.length) return;
                currentPage = page;

                paginatedItems.sort((a, b) => {
                    let valA = (a[currentSortField] || "")
                        .toString()
                        .toLowerCase();
                    let valB = (b[currentSortField] || "")
                        .toString()
                        .toLowerCase();
                    if (valA < valB) return sortAsc ? -1 : 1;
                    if (valA > valB) return sortAsc ? 1 : -1;
                    return 0;
                });

                const start = (page - 1) * itemsPerPage;
                const pageItems = paginatedItems.slice(
                    start,
                    start + itemsPerPage,
                );
                renderPageItems(pageItems);
                renderPaginationControls();
            }

            function renderPageItems(items) {
                const container = document.getElementById("viewContent");
                if (!items.length) {
                    container.innerHTML = "<p>No users found</p>";
                    return;
                }

                let html = `<table class="data-table">
    <thead>
        <tr>
            <th onclick="setSort('id')">ID</th>
            <th onclick="setSort('username')">Username</th>
            <th onclick="setSort('name')">Name</th>
            <th onclick="setSort('level')">Level</th>
            <th onclick="setSort('flag')">Flag</th>
            <th>Image</th>
            <th>Timestamp</th>
            <th>Actions</th>
        </tr>
    </thead><tbody>`;

                for (let item of items) {
                    const imgSrc = item.img ? atob(item.img) : "";
                    html += `<tr>
            <td>${item.id}</td>
            <td>${item.username}</td>
            <td>${item.name}</td>
            <td>${item.level}</td>
            <td>${item.flag}</td>
            <td class="image-preview">${imgSrc ? `<img src="${imgSrc}" alt="User">` : "N/A"}</td>
            <td>${item.timestamp}</td>
            <td class="action-cell">
                <button onclick="showUpdateUserPanel('${item.id}')">Edit</button>
                <button onclick="deleteItem('${item.id}', true)">Delete</button>
            </td>
        </tr>`;
                }

                html += "</tbody></table>";
                container.innerHTML = html;
            }

            function renderPaginationControls() {
                const totalPages = Math.ceil(
                    paginatedItems.length / itemsPerPage,
                );
                let html = '<div style="text-align:center; margin-top:10px;">';
                for (let i = 1; i <= totalPages; i++) {
                    html += `<button onclick="sortAndRenderPage(${i})" ${i === currentPage ? "disabled" : ""}>${i}</button> `;
                }
                html += "</div>";
                document.getElementById("viewContent").innerHTML += html;
            }

            function setSort(field) {
                if (currentSortField === field) sortAsc = !sortAsc;
                else {
                    currentSortField = field;
                    sortAsc = true;
                }
                sortAndRenderPage(currentPage);
            }

            function searchInView() {
                const keyword = document
                    .getElementById("searchId")
                    .value.toLowerCase()
                    .trim();
                const source =
                    currentItems && currentItems.length
                        ? currentItems
                        : JSON.parse(
                              localStorage.getItem("cachedUsers") || "[]",
                          );

                const filtered = source.filter(
                    (item) =>
                        item.id.toLowerCase().includes(keyword) ||
                        item.username.toLowerCase().includes(keyword) ||
                        item.name.toLowerCase().includes(keyword),
                );

                displayPaginated(filtered);
                displayMessage(
                    `Found ${filtered.length} matching users`,
                    false,
                    true,
                );
            }

            function refreshOfflineView() {
                document.getElementById("viewControls").style.display = "block";
                document.getElementById("viewTableContainer").style.display =
                    "block";
                document.getElementById("searchId").value = "";

                const cached = localStorage.getItem("cachedUsers");
                if (cached) {
                    currentItems = JSON.parse(cached);
                    displayPaginated(currentItems); // instead of displayItems

                    //displayItems(currentItems);
                    displayMessage(
                        `Offline: Loaded ${currentItems.length} users from local cache`,
                    );
                } else {
                    displayMessage("No offline data available", true);
                    document.getElementById("viewContent").innerHTML =
                        "<p>No cached users found.</p>";
                }
            }

            function saveViewOffline() {
                if (!currentItems || !currentItems.length) {
                    displayMessage("No user data to save", true);
                    return;
                }

                try {
                    localStorage.setItem(
                        "cachedUsers",
                        JSON.stringify(currentItems),
                    );
                    displayMessage(
                        `Saved ${currentItems.length} users to offline cache`,
                    );
                } catch (e) {
                    console.error("Failed to save to localStorage:", e);
                    displayMessage("Error saving offline data", true);
                }
            }

            function searchById() {
                const searchTerm = document
                    .getElementById("searchId")
                    .value.trim()
                    .toLowerCase();
                if (!searchTerm) {
                    displayItems(currentItems);
                    displayMessage(
                        `Showing all ${currentItems.length} users`,
                        false,
                        true,
                    );
                    return;
                }

                const filteredItems = currentItems.filter(
                    (item) =>
                        item.id.toLowerCase().includes(searchTerm) ||
                        item.username.toLowerCase().includes(searchTerm),
                );

                displayItems(filteredItems);
                displayMessage(
                    `Found ${filteredItems.length} matching users`,
                    false,
                    true,
                );
            }

            function clearSearch() {
                document.getElementById("searchId").value = "";
                displayItems(currentItems);
                displayMessage(
                    `Showing all ${currentItems.length} users`,
                    false,
                    true,
                );
            }

            function displayItems(items) {
                const container = document.getElementById("viewContent");

                if (!items || items.length === 0) {
                    container.innerHTML = "<p>No users found</p>";
                    return;
                }

                let html = `
    <table class="data-table">
        <thead>
            <tr>
                <th>IDA</th>
                <th>ID</th>
                <th>Name</th>
                <th>Username</th>
                <th>Level</th>
                <th>Flag</th>
                <th>Image</th>
                <th>Timestamp</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>`;

                items.forEach((item) => {
                    const imgSrc = item.img ? atob(item.img) : "";
                    html += `
            <tr>
                <td>${item.ida || "N/A"}</td>
                <td>${item.id}</td>
                <td>${item.name || ""}</td>
                <td>${item.username || ""}</td>
                <td>${item.level || 1}</td>
                <td>${item.flag || 1}</td>
                <td class="image-preview">${imgSrc ? `<img src="${imgSrc}" alt="User Image">` : "N/A"}</td>
                <td>${item.timestamp}</td>
                <td class="action-cell">
                    <button onclick="showUpdateUserPanel('${item.id}')">Edit</button>
                    <button onclick="deleteItem('${item.id}', true)">Delete</button>
                </td>
            </tr>`;
                });

                html += `</tbody></table>`;
                container.innerHTML = html;
            }

            // ======================
            // Update User Functions
            // ======================

            async function showUpdateUserPanel(userId) {
                createPanel("updateUserPanel", "CC", "ctc", 400, 500, {
                    bodyContent: "<p>Loading user data...</p>",
                    noFooter: true,
                    title: "Update User",
                });

                setTimeout(async () => {
                    try {
                        displayMessage("Loading user data...", false, true);
                        const response = await getData(
                            `https://j.kunok.com/aui.php?action=list&id=${encodeURIComponent(userId)}`,
                        );
                        if (
                            response.error ||
                            !response.data ||
                            response.data.length === 0
                        ) {
                            throw new Error(response.error || "User not found");
                        }

                        const user = response.data[0];

                        const formHTML = `
                <div class="logo-controls">
                    <div id="updateImgPreview">${user.img ? `<img src="${atob(user.img)}" alt="preview">` : ""}</div>

                    <div class="button-group">
                        <button id="updateUploadLogoBtn">Upload logo</button>
                        <button id="updateApplyLogoBtn">Apply Logo</button>
                    </div>
                </div>
                <form id="updateUserForm">
                    <div><label for="updateId">ID:</label> <input type="text" id="updateId" value="${user.id || ""}" disabled></div>
                    <div><label for="updateName">Name:</label> <input type="text" id="updateName" value="${user.name || ""}"></div>
                    <div><label for="updateUsername">Username:</label> <input type="text" id="updateUsername" value="${user.username || ""}"></div>
                    <div>
                        <label for="updatePassword">Password:</label>
                        <input type="password" id="updatePassword" value="${user.password || ""}">
                        <button type="button" id="updateTogglePasswordBtn" onclick="togglePassword('updatePassword', 'updateTogglePasswordBtn')">Show</button>
                    </div>
                    <div><label for="updateFlag">Flag:</label> <input type="text" id="updateFlag" value="${user.flag ?? ""}" placeholder="0 for suspended, 3 for wait"></div>
                    <div><label for="updateLevel">Level:</label> <input type="text" id="updateLevel" value="${user.level ?? ""}" placeholder="1 for default user"></div>
                    <div>
                        <label for="updateImg">Image URL:</label>
                        <input type="text" id="updateImg" value="${user.img ? atob(user.img) : ""}" placeholder="Enter image URL">
                    </div>
                    <button type="submit">Update User</button>
                </form>`;

                        const panelBody = document.querySelector(
                            "#updateUserPanel .panel-body",
                        );
                        if (panelBody) {
                            panelBody.innerHTML = formHTML;

                            const form =
                                document.getElementById("updateUserForm");
                            if (form) {
                                form.addEventListener("submit", async (e) => {
                                    e.preventDefault();
                                    displayMessage(
                                        `Starting to update user ${userId}...`,
                                        false,
                                        true,
                                    );
                                    const payload = {
                                        id: userId,
                                        name:
                                            document.getElementById(
                                                "updateName",
                                            ).value || undefined,
                                        username:
                                            document.getElementById(
                                                "updateUsername",
                                            ).value || undefined,
                                        password:
                                            document.getElementById(
                                                "updatePassword",
                                            ).value || undefined,
                                        flag:
                                            parseInt(
                                                document.getElementById(
                                                    "updateFlag",
                                                ).value,
                                            ) || undefined,
                                        level:
                                            parseInt(
                                                document.getElementById(
                                                    "updateLevel",
                                                ).value,
                                            ) || undefined,
                                    };
                                    const img =
                                        document.getElementById(
                                            "updateImg",
                                        ).value;
                                    if (img) payload.img = btoa(img);
                                    try {
                                        const response = await postto(
                                            "https://j.kunok.com/aui.php?action=update",
                                            payload,
                                        );
                                        displayMessage(
                                            response.message ||
                                                `User ${userId} updated successfully`,
                                        );
                                        form.reset();
                                        document.getElementById(
                                            "updateImgPreview",
                                        ).innerHTML = "";
                                        closePanel("updateUserPanel");
                                        refreshView();
                                    } catch (error) {
                                        console.error(
                                            "Update user error:",
                                            error,
                                        );
                                        displayMessage(
                                            `Error updating user ${userId}: ${error.message}`,
                                            true,
                                        );
                                    }
                                });

                                document
                                    .getElementById("updateTogglePasswordBtn")
                                    .addEventListener("click", () =>
                                        togglePassword(
                                            "updatePassword",
                                            "updateTogglePasswordBtn",
                                        ),
                                    );
                                document
                                    .getElementById("updateUploadLogoBtn")
                                    .addEventListener(
                                        "click",
                                        toggleUploadPanel,
                                    );
                                document
                                    .getElementById("updateApplyLogoBtn")
                                    .addEventListener("click", () =>
                                        logoset(
                                            "updateImg",
                                            "updateImgPreview",
                                        ),
                                    );
                            } else {
                                console.error("updateUserForm not found");
                            }
                        } else {
                            console.error(
                                "updateUserPanel .panel-body not found",
                            );
                        }
                    } catch (error) {
                        console.error("Fetch user error:", error);
                        const panelBody = document.querySelector(
                            "#updateUserPanel .panel-body",
                        );
                        if (panelBody) {
                            panelBody.innerHTML =
                                '<p class="error">Failed to load user data</p>';
                        }
                        displayMessage("Failed to load user data", true);
                    }
                }, 100);
            }

            // ======================
            // Delete Functions
            // ======================

            async function deleteItem(userId, refreshAfter = false) {
                if (!confirm(`Are you sure you want to delete user ${userId}?`))
                    return;

                try {
                    displayMessage(`Deleting user ${userId}...`, false, true);
                    const payload = { id: userId };
                    const response = await postto(
                        "https://j.kunok.com/aui.php?action=del",
                        payload,
                    );
                    displayMessage(
                        response.message ||
                            `User ${userId} deleted successfully`,
                    );

                    if (refreshAfter) {
                        refreshView();
                    }
                } catch (error) {
                    displayMessage(
                        `Error deleting user ${userId}: ${error.message}`,
                        true,
                    );
                    console.error("Delete user error:", error);
                }
            }

            function showBatchDeletePanel() {
                createPanel("batchDeletePanel", "CC", "ctc", 600, 500, {
                    bodyContent: `
        <div>
            <label for="deleteIds">User IDs to delete (comma separated):</label>
            <textarea id="deleteIds" rows="5" style="width:100%;" required></textarea>
        </div>
        <div class="control-row">
            <button onclick="executeBatchDelete()">Delete All</button>
            <button onclick="closePanel('batchDeletePanel')">Cancel</button>
        </div>
        <div id="deleteProgress" class="progress-container"></div>`,
                    noFooter: true,
                    title: "Batch Delete Users",
                });
            }

            async function executeBatchDelete() {
                const deleteIds = document
                    .getElementById("deleteIds")
                    .value.split(",")
                    .map((id) => id.trim())
                    .filter((id) => id.length > 0);

                if (deleteIds.length === 0) {
                    displayMessage("No valid IDs provided for deletion", true);
                    return;
                }

                if (
                    !confirm(
                        `Are you sure you want to delete ${deleteIds.length} users?`,
                    )
                ) {
                    return;
                }

                const progressDiv = document.getElementById("deleteProgress");
                progressDiv.innerHTML = "Starting batch delete...";
                displayMessage("Starting batch delete...", false, true);

                let successCount = 0;
                let errorCount = 0;

                for (let i = 0; i < deleteIds.length; i++) {
                    const userId = deleteIds[i];

                    try {
                        progressDiv.innerHTML = `Processing ${i + 1}/${deleteIds.length}: ${userId}...`;
                        const payload = { id: userId };
                        await postto(
                            "https://j.kunok.com/aui.php?action=del",
                            payload,
                        );
                        successCount++;
                    } catch (error) {
                        console.error(`Error deleting ${userId}:`, error);
                        errorCount++;
                    }
                }

                progressDiv.innerHTML += `<br><br>Batch delete completed:<br>
        Successfully deleted: ${successCount}<br>
        Failed to delete: ${errorCount}`;

                displayMessage(
                    `Batch delete completed: ${successCount} deleted, ${errorCount} errors`,
                );
                refreshView();
            }

            // ======================
            // Add User Functions
            // ======================

            function showAddItemPanel() {
                createPanel("addUserPanel", "CC", "ctc", 400, 600, {
                    bodyContent: `
        <div class="logo-controls">
            <div id="addImgPreview"></div>
            <div class="button-group">
                <button id="addUploadLogoBtn">Upload logo</button>
                <button id="addApplyLogoBtn">Apply Logo</button>
            </div>
        </div>
        <form id="addUserForm">
            <div><label for="addName">Name:</label> <input type="text" id="addName" required></div>
            <div><label for="addUsername">Username:</label> <input type="text" id="addUsername" required></div>
            <div>
                <label for="addPassword">Password:</label>
                <input type="password" id="addPassword" required>
                <button type="button" id="toggleAddPasswordBtn" onclick="togglePassword('addPassword', 'toggleAddPasswordBtn')">Show</button>
            </div>
            <div>
                <label for="addFlag">Flag:</label>
                <select id="addFlag">
                    <option value="1">1 (Active)</option>
                    <option value="0">0 (Suspended)</option>
                    <option value="3">3 (Wait)</option>
                </select>
            </div>
            <div>
                <label for="addLevel">Level:</label>
                <select id="addLevel">
                    <option value="1">1 (User)</option>
                    <option value="2">2 (Moderator)</option>
                    <option value="3">3 (Admin)</option>
                </select>
            </div>
            <div>
                <label for="addImg">Image URL:</label>
                <input type="text" id="addImg" placeholder="Enter image URL">
            </div>
            <button type="submit">Add User</button>
        </form>`,
                    noFooter: true,
                    title: "Add New User",
                });

                setTimeout(() => {
                    const form = document.getElementById("addUserForm");
                    if (form) {
                        form.addEventListener("submit", async function (e) {
                            e.preventDefault();

                            const username =
                                document.getElementById("addUsername").value;
                            displayMessage(
                                `Starting to add user ${username}...`,
                                false,
                                true,
                            );

                            try {
                                displayMessage(
                                    `Checking username ${username}...`,
                                    false,
                                    true,
                                );
                                const exists =
                                    await checkUsernameExists(username);
                                if (exists) {
                                    displayMessage(
                                        `Username ${username} already exists.`,
                                        true,
                                    );
                                    return;
                                }

                                const payload = {
                                    name: document.getElementById("addName")
                                        .value,
                                    username: username,
                                    password:
                                        document.getElementById("addPassword")
                                            .value,
                                    flag: parseInt(
                                        document.getElementById("addFlag")
                                            .value,
                                    ),
                                    level: parseInt(
                                        document.getElementById("addLevel")
                                            .value,
                                    ),
                                    img: document.getElementById("addImg").value
                                        ? btoa(
                                              document.getElementById("addImg")
                                                  .value,
                                          )
                                        : "",
                                };

                                const response = await postto(
                                    "https://j.kunok.com/aui.php?action=add",
                                    payload,
                                );
                                displayMessage(
                                    `User ${username} added successfully: ${response.message}`,
                                );
                                form.reset();
                                document.getElementById(
                                    "addImgPreview",
                                ).innerHTML = "";
                                closePanel("addUserPanel");
                                refreshView();
                            } catch (error) {
                                displayMessage(
                                    `Error adding user ${username}: ${error.message}`,
                                    true,
                                );
                                console.error("Add user error:", error);
                            }
                        });

                        document
                            .getElementById("addUploadLogoBtn")
                            .addEventListener("click", toggleUploadPanel);
                        document
                            .getElementById("addApplyLogoBtn")
                            .addEventListener("click", () =>
                                logoset("addImg", "addImgPreview"),
                            );
                    } else {
                        console.error("addUserForm not found");
                    }
                }, 100);
            }

            function showBatchAddPanel() {
                createPanel("batchAddPanel", "CC", "ctc", 500, 500, {
                    bodyContent: `
        <form id="batchAddForm">
            <div>
                <label for="batchUsernames">Usernames (comma separated):</label>
                <textarea id="batchUsernames" rows="5" required></textarea>
            </div>
            <div><label for="batchName">Default Name:</label> <input type="text" id="batchName" value="User" required></div>
            <div>
                <label for="batchPassword">Default Password:</label>
                <input type="password" id="batchPassword" value="password" required>
                <button type="button" id="toggleBatchPasswordBtn" onclick="togglePassword('batchPassword', 'toggleBatchPasswordBtn')">Show</button>
            </div>
            <div>
                <label for="batchFlag">Default Flag:</label>
                <select id="batchFlag">
                    <option value="1">1 (Active)</option>
                    <option value="0">0 (Suspended)</option>
                    <option value="3">3 (Wait)</option>
                </select>
            </div>
            <div>
                <label for="batchLevel">Default Level:</label>
                <select id="batchLevel">
                    <option value="1">1 (User)</option>
                    <option value="2">2 (Moderator)</option>
                    <option value="3">3 (Admin)</option>
                </select>
            </div>
            <div><label for="batchImg">Default Image URL:</label> <input type="text" id="batchImg" placeholder="Enter image URL"></div>
            <button type="submit">Add All Users</button>
        </form>
        <div id="batchProgress" class="progress-container"></div>`,
                    noFooter: true,
                    title: "Add Multiple Users",
                });

                setTimeout(() => {
                    document
                        .getElementById("batchAddForm")
                        .addEventListener("submit", async function (e) {
                            e.preventDefault();
                            const usernames = document
                                .getElementById("batchUsernames")
                                .value.split(",")
                                .map((name) => name.trim())
                                .filter((name) => name.length > 0);

                            if (usernames.length === 0) {
                                displayMessage(
                                    "No valid usernames provided",
                                    true,
                                );
                                return;
                            }

                            const defaultName =
                                document.getElementById("batchName").value;
                            const defaultPassword =
                                document.getElementById("batchPassword").value;
                            const defaultFlag =
                                document.getElementById("batchFlag").value;
                            const defaultLevel =
                                document.getElementById("batchLevel").value;
                            const defaultImg = document.getElementById(
                                "batchImg",
                            ).value
                                ? btoa(
                                      document.getElementById("batchImg").value,
                                  )
                                : "";
                            const progressDiv =
                                document.getElementById("batchProgress");

                            displayMessage(
                                `Starting to process ${usernames.length} users...`,
                                false,
                                true,
                            );

                            let created = 0;
                            let errors = 0;

                            for (let i = 0; i < usernames.length; i++) {
                                const username = usernames[i];
                                try {
                                    progressDiv.innerHTML = `Processing ${i + 1}/${usernames.length}: ${username}...`;

                                    const exists =
                                        await checkUsernameExists(username);
                                    if (exists) {
                                        progressDiv.innerHTML += `<br>Username ${username} already exists. Skipping...`;
                                        errors++;
                                        continue;
                                    }

                                    const payload = {
                                        name: `${defaultName} ${username}`,
                                        username: username,
                                        password: defaultPassword,
                                        flag: parseInt(defaultFlag),
                                        level: parseInt(defaultLevel),
                                        img: defaultImg,
                                    };

                                    await postto(
                                        "https://j.kunok.com/aui.php?action=add",
                                        payload,
                                    );
                                    created++;
                                } catch (error) {
                                    console.error(
                                        `Error processing ${username}:`,
                                        error,
                                    );
                                    errors++;
                                }
                            }

                            displayMessage(
                                `Batch completed: ${created} new, ${errors} errors`,
                            );
                            progressDiv.innerHTML += `<br><br>Batch completed:<br>
                New users: ${created}<br>
                Errors: ${errors}`;

                            refreshView();
                        });
                }, 100);
            }
            function clearLocalStorage() {
                localStorage.removeItem("cachedUsers");
                localStorage.removeItem("lastSync");
                displayMessage("Local storage cleared", false, true);
                // Maybe refresh the view if it's open?
                if (
                    document.getElementById("viewTableContainer").style
                        .display === "block"
                ) {
                    refreshOfflineView();
                }
            }
            // Initialize
            document.addEventListener("DOMContentLoaded", function () {
                window.debug = false;
                window.addNew = function (data) {
                    const usernames = data
                        .split(",")
                        .map((name) => name.trim())
                        .filter((name) => name.length > 0);

                    if (usernames.length === 0) {
                        displayMessage(
                            "No valid usernames provided in data parameter",
                            true,
                        );
                        return;
                    }

                    displayMessage(
                        `Starting batch add for ${usernames.length} users...`,
                        false,
                        true,
                    );

                    let created = 0;
                    let errors = 0;

                    (async function processBatch() {
                        for (const username of usernames) {
                            try {
                                displayMessage(
                                    `Checking username ${username}...`,
                                    false,
                                    true,
                                );
                                const exists =
                                    await checkUsernameExists(username);
                                if (exists) {
                                    console.log(
                                        `Username ${username} already exists. Skipping...`,
                                    );
                                    errors++;
                                    continue;
                                }

                                const payload = {
                                    name: `User ${username}`,
                                    username: username,
                                    password: "password",
                                    flag: 1,
                                    level: 1,
                                    img: "",
                                };

                                await postto(
                                    "https://j.kunok.com/aui.php?action=add",
                                    payload,
                                );
                                created++;
                            } catch (error) {
                                console.error(
                                    `Error processing ${username}:`,
                                    error,
                                );
                                errors++;
                            }
                        }

                        displayMessage(
                            `Batch completed: ${created} new, ${errors} errors`,
                        );
                        refreshView();
                    })();
                };
            });
        </script>