{% extends "base.j2" %}
{% block extra_css %}
        input#searchInput {
            width: 100%;
            height: 2rem;
            padding: 0.5rem;
            border-radius: 4px;
            border: 1px solid #ccc;
            margin-bottom: 1rem;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        input#searchInput:focus {
            border-color: #0FB981;
            box-shadow: 0 0 8px 0 #0FB981;
        }

        #searchInputLabel {
            display: block;
            font-size: larger;
            margin-bottom: 1rem;
        }
{% endblock %}
{% block body %}
    <header class="header">
        <h1>{{ header_title }}</h1>
    </header>
    <main class="main-content">
        <label id="searchInputLabel" for="searchInput">Search:</label>
        <input id="searchInput" placeholder="Loading..." oninput="searchItems()" role="search" disabled />
        <br />
        <h2 id="result_header"></h2>
        <ul id="results"></ul>
    </main>
    <script>
        let fuse;
        let index;

        fetch('list.json.gz')
            .then(response => response.body.pipeThrough(new DecompressionStream('gzip')))
            .then(stream => new Response(stream))
            .then(response => response.json())
            .then(data => {
                const flattenedData = [];
                Object.values(data).forEach(category => {
                    Object.values(category).forEach(item => {
                        flattenedData.push(item);
                    });
                });
                fuse = new Fuse(flattenedData, {
                    keys: ['fullname'],
                    threshold: 0.2
                });
                index = fuse.index; // Create the index
                document.getElementById("searchInput").placeholder = "";
                document.getElementById("searchInput").disabled = false;
            });

        function searchItems() {
            const query = document.getElementById("searchInput").value;
            const results = fuse.search(query, { limit: 50 }); // Limit results for performance
            const list = document.getElementById("results");
            reault_header = document.getElementById("result_header");
            result_header.textContent = `Results:`;
            list.innerHTML = "";
            results.forEach(item => {
                const li = document.createElement("li");
                const a = document.createElement("a");
                a.href = item.item.url;
                a.textContent = item.item.fullname;
                li.appendChild(a);
                list.appendChild(li);
            });
        }
    </script>
{% endblock %}