function error(message) {
    const errorContainer = document.getElementById("mao-error");
    const errorElement = document.getElementById("mao-error-message");

    errorElement.innerText = message;
    errorContainer.classList.remove("hidden");
}

function displayResponse(response) {
    if (!response.ok) {
        error(response.error);
        return;
    }
    const { videos, total } = response;
    if (videos.length === 0) {
        error("search returned no results");
        return;
    }
    const resultElement = document.getElementById("result");
    resultElement.innerHTML = `<p>Showing ${videos.length}/${total} results.</p>`
        + "<ul id='video-list'>"
        + videos
            .map(v => {
                return `<li><p><a href="${v.path}">${v.title}</a> - ${v.author}</p></li>`
            })
            .join("") 
        + "</ul>";
}

function main() {
    const params = new URLSearchParams(window.location.search);
    return fetch(`/api/search?${params.toString()}`)
        .then(v => v.json())
        .then(displayResponse);
}

main();