{{ block content }}

    <style>

        .ul_properties {
            /* Increase line-height
               compare to default */
            line-height: 3em;
            float: left;
        }

        video {
            border: 1px solid #3368FF;
        }

    </style>

    <h1>Group Assignment</h1>

    <div class="card bg-light instructions" style="border: 1px solid #3368FF">

            <div class="ul_properties">

                <ul style="font-size:20px">
                    <li> In a first step, the computer will assign participants randomly into <b> two groups</b>. </li>
                    <li> Please click on the video clip below to see an illustration of the group assignment. </li>
                    <li> Only if you watch the entire video clip, a "Next" button will appear <b> below the video. </b> </li>
                    <li> After watching the video clip, click "Next" to proceed (you might need to scroll down to see the button). </li>
                </ul>
            </div>
    </div>

    <video width=100% controls id="video">
                    <source src="{% static image_path %}" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.

    </video>

{# add an EventListener that checks for whether the video has finished. If so, edit button style. Below you can see
    that the button is hidden; style="visibility: hidden". As soon as video is finished, the EventListener will edit
    this bye 'button.style.visibility = "visible"' and make button visible; style="visibility: visible" #}

    <script>
        const video = document.querySelector('video');
        video.addEventListener('ended', (event) => {
            const button = document.getElementById("Next");
            button.style.visibility = "visible";
        });
    </script>

    <button class="otree-btn-next btn btn-primary" id="Next" style="visibility: hidden;">Next</button>

{{ endblock }}