{{define "player"}}
    {{with $x := index . 0}}
    <audio id="player" preload="auto" tabindex="0" controls>
        <source src="{{$x.Filename}}">
    </audio>
    {{end}}
{{end}}
{{define "playlist"}}
    <ol id="playlist">
        {{range $i, $el := .}}
        <li{{if eq $i 0}} class="active"{{end}}>
            <a class="track" href="{{$el.Filename}}">{{$el.Artist}} - {{$el.Title}}</a>
            {{template "track-info" $el}}
        </li>
        {{end}}
    </ol>
{{end}}

{{define "track-info"}}{{end}}

{{define "full-player"}}
    {{template "player" .}}
    {{template "playlist" .}}
    {{template "playlist-js"}}
{{end}}

{{define "playlist-js"}}
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script type="text/javascript">
        $(document).ready(function() {
            var current = 0;
            var $audio = $('#player');
            var $playlist = $('#playlist');
            var $tracks = $playlist.find('li a.track');
            var len = $tracks.length;

            $playlist.on('click', 'a.track', function (e) {
                e.preventDefault();
                link = $(this);
                current = link.parent().index();
                play(link, $audio[0]);
            });
            $audio[0].addEventListener('ended', function (e) {
                playNext();
            });
            $('a#next').on('click', function (e) {
                e.preventDefault();
                playNext();
            });
            $('a#prev').on('click', function (e) {
                e.preventDefault();
                playPrev();
            });

            function playPrev() {
                current--;
                if (current <= 0) {
                    current = len - 1;
                }
                link = $playlist.find('a.track')[current];
                play($(link), $audio[0]);
            }

            function playNext() {
                current++;
                if (current == len) {
                    current = 0;
                }
                link = $playlist.find('a.track')[current];
                play($(link), $audio[0]);
            }

            function play($link, $player) {
                $player.src = $link.attr('href');
                par = $link.parent();
                par.addClass('active').siblings().removeClass('active');
                $player.load();
                $player.play();
            }
        });
	</script>
{{end}}