function search_ul_items() {
const query = document.getElementById('searchbox').value.toLowerCase();
const ul = document.querySelector('ul'); // only one UL
if (!ul) return;

const items = ul.querySelectorAll('li');
items.forEach(li => {
    if (li.textContent.toLowerCase().includes(query)) {
    li.style.display = 'list-item';
    } else {
    li.style.display = 'none';
    }
});
}

// 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);
});