{{ extends 'global/Page.html' }}
{{ block title }}Video Instructions{{ endblock }}

{{ block content }}

{{ video_html|safe }}
<p id="timerMessage">You can proceed after the video ends.</p>

<!-- Button to move forward -->
<button id="nextButton" disabled onclick="document.forms[0].submit();">Next</button>

<script>
    const videoDuration = {{ video_duration }};
    const nextButton = document.getElementById("nextButton");
    const timerMessage = document.getElementById("timerMessage");

    const timer = setTimeout(() => {
        nextButton.disabled = false;
        timerMessage.textContent = "You may now proceed.";
    }, videoDuration * 1000);
</script>

{{ endblock }}