{% extends "/Bases/StandardWebPage.html.twig" %}

{% block content %}

    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
    <div class="InnerContent">
        <h1>Folk Tune Search</h1>
        <input type="text" id="SearchInput" placeholder="Search for a tune...">
        <div id="AlgoliaResults"></div>
    </div>

    <script>
        document.getElementById("SearchInput").addEventListener("input", (event) => {
            const query = event.target.value;
            if (query.trim().length > 0) {
                searchTunes(query);
            } else {
                document.getElementById("AlgoliaResults").innerHTML = "";
            }
        });
    </script>
{% endblock %}