function paginate_ul_items(page = 1) {
    const ul = document.querySelector('ul');
    if (!ul) return;

    const items = Array.from(ul.querySelectorAll('li'));
    const query = document.getElementById('searchbox').value.toLowerCase();

    // Filter items based on search
    const filteredItems = items.filter(li => li.textContent.toLowerCase().includes(query));

    const itemsPerPage = 10;
    const totalPages = Math.ceil(filteredItems.length / itemsPerPage);

    // Hide all items first
    items.forEach(li => li.style.display = 'none');

    // Show only items for the current page
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    filteredItems.slice(start, end).forEach(li => li.style.display = 'list-item');

    // Render pagination controls
    renderPaginationControls(totalPages, page);
}

function renderPaginationControls(totalPages, currentPage) {
    let paginationDiv = document.getElementById('pagination-controls');
    let separator = document.getElementById('vertical-seperator');
    if (!paginationDiv) {
        paginationDiv = document.createElement('div');
        paginationDiv.id = 'pagination-controls';
        paginationDiv.style.display = 'inline-block';
        paginationDiv.style.marginLeft = '16px';
        paginationDiv.style.verticalAlign = 'middle';

        const searchDiv = document.getElementById('searchbox').parentNode;

        // Create a wrapper so we can put a separator between search and pagination
        const wrapper = document.createElement('div');
        wrapper.style.display = 'flex';
        wrapper.style.alignItems = 'center';
        wrapper.style.gap = '12px'; // space around separator

        // Move searchbox into wrapper
        searchDiv.appendChild(wrapper);
        wrapper.appendChild(document.getElementById('searchbox'));

        // Separator
        separator = document.createElement('div');
        separator.id = "vertical-seperator"
        separator.style.width = '1px';
        separator.style.height = '28px';
        separator.style.marginRight = "-15px";
        separator.style.backgroundColor = '#ccc';
        wrapper.appendChild(separator);

        // Add pagination after separator
        wrapper.appendChild(paginationDiv);
    }
    paginationDiv.innerHTML = '';
    if (separator) {
        separator.style.display = totalPages <= 1 ? 'none' : 'block';
    }

    if (totalPages <= 1) {
        paginationDiv.style.display = 'none';

        return;
    } else {
        paginationDiv.style.display = 'inline-block';
    }

    // Previous button
    const prevBtn = document.createElement('button');
    prevBtn.textContent = '<';
    prevBtn.disabled = currentPage === 1;
    prevBtn.onclick = () => paginate_ul_items(currentPage - 1);
    paginationDiv.appendChild(prevBtn);

    // Page numbers
    for (let i = 1; i <= totalPages; i++) {
        const btn = document.createElement('button');
        btn.textContent = i;
        btn.disabled = i === currentPage;
        btn.onclick = () => paginate_ul_items(i);
        paginationDiv.appendChild(btn);
    }

    // Next button
    const nextBtn = document.createElement('button');
    nextBtn.textContent = '>';
    nextBtn.disabled = currentPage === totalPages;
    nextBtn.onclick = () => paginate_ul_items(currentPage + 1);
    paginationDiv.appendChild(nextBtn);
}


// Update search function to use pagination
function search_ul_items() {
    paginate_ul_items(1);
}

// Create search box and insert before the available pages paragraph
window.addEventListener('DOMContentLoaded', function() {
    const searchDiv = document.createElement('div');
    searchDiv.style.marginBottom = '16px';
    searchDiv.style.paddingLeft = '19px';
    searchDiv.innerHTML = `
        <input 
        type="text" 
        id="searchbox" 
        placeholder="Search pages..." 
        style="
            padding: 6px 6px 6px 28px; 
            font-size: 1em; 
            width: 220px; 
            background: url('../../css/icons/search.webp') no-repeat 6px center; 
            background-size: 20px 20px;
        " 
        title="Search for pages"
        />
    `;
    const available = document.getElementById('available');
    available.parentNode.insertBefore(searchDiv, available);

    const searchbox = document.getElementById('searchbox');
    if (searchbox) {
        searchbox.title = "Search for pages";
        searchbox.style.fontStyle = "bold";
    }

    document.getElementById('searchbox').addEventListener('input', search_ul_items);

    // Initial pagination setup
    paginate_ul_items(1);
});