{{ block title }}
    Please take a seat in the waiting room. The nurse will call you.
{{ endblock }}

{{ block content }}
    <button id="Next" style="visibility:hidden;">
        Enter the doctor's room
    </button>

    {% comment %}<script>
        let waiting_times = js_vars.waiting_time * 1000
        setTimeout(function() {
            document.querySelector("#Next").style.visibility = "visible";},
            waiting_times);
    </script>{% endcomment %}

    <button class="button" type="button" id="movingbutton">Pay attention to the nurse</button>

    <script>
        let waiting_times = js_vars.waiting_time * 1000
        setTimeout(function() {
            document.querySelector("#Next").style.visibility = "visible";
            document.querySelector('movingbutton').disabled = true;},
            waiting_times);

        var mb = document.querySelector("#movingbutton");

        mb.addEventListener("click",change);
            function change() {
                mb.style.visibility = "hidden";
                let i = Math.floor(Math.random() * 500) + 1;
                let j = Math.floor(Math.random() * 500) + 1;
                console.log('here', i, j, mb.style.left, mb.style.top);
                mb.style.left = i + 'px';
                mb.style.top = j + "px";
                setTimeout(function () {
                    mb.style.visibility = "visible";},
                    (Math.random() * 2 + 2) * 1000)
            }
        setTimeout(function () {
            mb.removeEventListener("click", change);
            mb.disabled = true;
        }, waiting_times)

    </script>

    <style>
        #movingbutton{
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;
        left : 20px;
        top : 50px;
        }
        body{
        width : 100%;
        }
        .ctr{
        width : 100%;
        height : 100%;
        }
    </style>


{{ endblock }}