{{ define "bodyClass" }}page-regio43{{ end }}

{{ define "content" }}
<div class="video-zone max-80">
    <video id="video-player" controls></video>
</div>

<h1>Regio43</h1>

<main class="max-80">
    {{ range .PlaylistItems }}
    <div class="playlist-item" data-videoid="{{ .VideoId }}">
        <img src="{{ .ThumbnailUrl }}">
        <p>
            <a href="https://invidious.prettysunflower.moe/watch?v={{ .VideoId }}">
                <strong>{{ .Title }}</strong><br>
                {{ .Channel.Name }}
            </a>
        </p>
    </div>
    {{ end }}
</main>

<script>
    const playlistItems = document.getElementsByClassName("playlist-item");
    const videoBlock = document.querySelector(".video-zone video");

    function loadVideo(videoId) {
        videoBlock.src = `https://invidious.prettysunflower.moe/latest_version?local=true&id=${videoId}`;
        videoBlock.currentTime = 0;
        videoBlock.play();
    }

    let index = 0;

    playlistItems[index].classList.add('active');
    loadVideo(playlistItems[index].dataset.videoid);

    videoBlock.addEventListener('ended', () => {
        playlistItems[index].classList.remove('active');
        index = index + 1;

        if (index < playlistItems.length) {
            playlistItems[index].classList.add('active');
            loadVideo(playlistItems[index].dataset.videoid);
        }
    })
</script>
{{ end }}