<div class="planaday">
    <style>
        .pad-log-selection ul {
            list-style-type: circle;
            padding-left: 20px;
        }

        .pad-log-display {
            padding: 10px;
        }

        .pad-log-display textarea {
            width: 100%;
            height: 50vh;
        }
    </style>

    <h1>{{_"Logs"}}</h1>

    <div id="pad-{{autoGenerated->id->selection}}" class="pad-log-selection">
        <ul>
            <pad-for _:in:_="years" key="year" as="months">
                <li>
                    {{_"Jaar"}} {{year}}:
                    <ul>
                        <pad-for _:in:_="months" key="month" as="day">
                            <li>
                                {{_"Maand"}} {{month}}:
                                <ul>
                                    <pad-for _:in:_="day" as="day">
                                        <li>
                                            {{_"Dag"}} {{day}}:
                                            <button type="button" class="pad-log-file" data-year="{{year}}" data-month="{{month}}" data-day="{{day}}">
                                                {{year}}-{{month}}-{{day}}.log
                                            </button>
                                        </li>
                                    </pad-for>
                                </ul>
                            </li>
                        </pad-for>
                    </ul>
                </li>
            </pad-for>
        </ul>
    </div>
    <div id="pad-{{autoGenerated->id->outputDisplay}}" class="pad-log-display"></div>
    <script type="module" class="pad-script">
        let buttons = document.getElementsByClassName("pad-log-file");
        const outputDiv = document.getElementById("pad-<!--{{autoGenerated->id->outputDisplay}}-->");

        for (let button of buttons){
            button.addEventListener("click", async () => {
                outputDiv.innerHTML = "";
                const year = button.getAttribute("data-year");
                const month = button.getAttribute("data-month");
                const day = button.getAttribute("data-day");

                const fileHeader = document.createElement("h2");
                fileHeader.innerText = year + "-" + month + "-" + day + ".log";
                outputDiv.append(fileHeader);

                const loadingSpan = document.createElement("span");
                loadingSpan.innerText = "loading..."
                outputDiv.append(loadingSpan);

                let result = await fetch(
                    "/wp-json/planaday-connector/v1/log/get/" + year + "/" + month + "/" + day,{
                        headers: <!--{{restNonceHeader}}-->
                    }
                );
                const textArea = document.createElement("textarea");
                textArea.value = await result.text();

                outputDiv.replaceChild(textArea, loadingSpan);
            });
        }
    </script>
</div>