{{ block styles }}
<link href="{% static 'global/Ses_2.css' %}" rel="stylesheet"/>
{{ endblock }}

{{ block title }}
{{ if en }}
Video Instructions
{{ else }}
Instruksi Video
{{ endif }}
{{ endblock }}

{{ block content }}
{{ if en }}
<div class="consent">
 <h3>Please Watch the Following Video</h3>

<p>
In the next section, you will watch a short video
related to decision-making and situations involving uncertainty.
</p>

<p>
Please watch the video until it finishes before proceeding to the next section.
</p>

<p>
Once the video has finished playing, the button to continue will become available.
</p>

<br>
    {{ else }}
<h3>Mohon Tonton Video Berikut</h3>

<p>
Pada bagian berikutnya, Anda akan menonton sebuah video singkat
terkait pengambilan keputusan dan situasi ketidakpastian.
</p>

<p>
Mohon menonton video hingga selesai sebelum melanjutkan ke bagian berikutnya.
</p>

<p>
Setelah video selesai diputar, tombol untuk melanjutkan akan tersedia.
</p>

<br>
    {{ endif }}

<div style="text-align: center;">
    <!-- Tempat video -->
    <video id="treatmentVideo" width="900" controls>
        <source src="/static/Treatment_Vids/2. House_Always_Wins.mp4" type="video/mp4">
    </video>
        {{ if en }}
        Please watch the following video.
        {{ else }}
        Tolong perhatikan video berikut.
        {{ endif }}
</div>
<br>

    <b style="color: blue;">
        {{ if en }}
        What is the video about?
        {{ else }}
        Tentang apakah video tersebut?
        {{ endif }}
    </b>
    {{ formfields }}

<div style="text-align: center;">
    <button id="nextBtn" class="btn btn-primary btn-lg" type="submit" disabled>
        {{ if en }}
        Next
        {{ else }}
        Lanjut
        {{ endif }}
    </button>
</div>

</div>

<script>
    const video = document.getElementById('treatmentVideo');
    const nextBtn = document.getElementById('nextBtn');

    video.addEventListener('ended', function () {
        nextBtn.disabled = false;
    });
</script>

{{ endblock }}