{{ define "main" }}
<script>
    document.addEventListener("DOMContentLoaded", () => {
        for (const e of document.getElementsByClassName("js-only")) {
            e.classList.remove("js-only");
        }

        const songs = document.querySelectorAll("li");
        const search = document.getElementById("search");
        const songlist = document.getElementById("song-list");

        const normalize = str => str.normalize('NFD').replace(/\p{Diacritic}/gu, "");

        search.addEventListener("input", () => {
            const searchText = search.value.toLowerCase().trim();
            const searchTerms = normalize(searchText).split(" ");
            const hasFilter = searchText.length > 0;
            songlist.classList.toggle("list-searched", hasFilter);

            songs.forEach(song => {
                const songText = normalize(`${song.textContent} ${song.dataset.alias}`).toLowerCase();
                const isMatch = searchTerms.every(term => songText.includes(term));
                song.hidden = !isMatch;
            });
        });

        const clearSearch = document.getElementById("clear-search");
        clearSearch.addEventListener("click", () => {
            search.value = "";
            songs.forEach(song => {
                song.hidden = false;
            });
            songlist.classList.remove("list-searched");
        });
    });
</script>

<div class="list-container">


    {{ $tagsPage := eq .Title "Tags"}}

    <h2 class="center">What do you want to sing?</h2>
    <div class="search-bar-container">
         <div class="search-wrapper">
        <input type="text" id="search" class="search-bar" placeholder="Search ALL Songs...">
        <button id="clear-search" class="js-only">
            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
                <title>Backspace</title>
                <path
                    d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z"
                    fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                    d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33">
                </path>
            </svg></button>
            </div>
    </div>

    <ul id="song-list">
        {{ range .Pages }}
        <li data-alias={{ if .Params.alias }}{{ .Params.alias }}{{ else }}{{ .Params.title }}{{ end }}>
            <a href="{{ .RelPermalink }}">
                {{ .Title }}
            </a>
        </li>
        {{ end }}
    </ul>
</div>

<div class="about">
        {{ .Content }}
</div>

    <div id="setlist-tab">Setlist</div>

    <div id="setlist-sidebar" class="hidden">
      <h6>Set List</h3>
      <ul id="setlist"></ul>
      <button id="add-to-setlist" style="display: none">＋ Add Song</button>
    </div>

<div class="back-to-top">
<a href="#top">
    back to top
</a>
</div>

{{ end }}