{% extends "base" %} {% block content %}
<div class="ui cards">
    <div class="ui centered raised card">
        <div class="image">
            <img src="/static/image/card.jpg">
        </div>
        <div class="center aligned content">
            <a class="header">{{ music_title }}</a>
            <div class="description">
                <h2 id="time">{{ interval }}</h2>
            </div>
        </div>
        <div class="extra content">
            <div class="ui two buttons">
                <a href="/" class="ui red button">Stop</a>
                <a href="/random" class="ui green button">Next</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    window.onload = function () {
        let timeElement = document.querySelector('#time');
        let sound = preload_audio('/static/sound/{{ music_file }}')
        startTimer({{ interval }}, timeElement, sound);
    }

    function startTimer(seconds, element, sound) {
        var timer = seconds - 1
        let interval = setInterval(function () {

            element.textContent = timer;

            if (--timer < 0) {
                play_audio(sound, 8000, function () {
                    location.reload()
                })

                clearInterval(interval)
                element.textContent = '♪'
            }
        }, 1000);
    }

</script>
{% endblock content %}