{{ block title }}
    Trial Round {{player.round_number}} of {{C.NUM_TRIAL_ROUNDS}}
{{ endblock }}
{{ block content }}
    <br>
    <div style="display:flex; gap:40px; justify-content:left;">
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedII.jpg' %}" alt="Closed envelope:first option" width="140">
            <div>Option A</div>
        </div>
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedII.jpg' %}" alt="Closed envelope:second option" width="140">
            <div>Option B</div>
        </div>
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedII.jpg' %}" alt="Closed envelope:third option" width="140">
            <div>Option C</div>
        </div>
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedII.jpg' %}" alt="Closed envelope:fourth option" width="140">
            <div>Option D</div>
        </div>
    </div>
    <br>

    {{ formfield player.first_choice }}
    <div id="rec_block" style="display:none; margin-top:20px;">
        <p>The AI system recommends option: <b>{{ recommended_option }}</b></p>

        <p>{{ formfield player.final_choice }}</p>
    </div>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
    const firstChoice = document.querySelector('select[name="first_choice"]');
    firstChoice.addEventListener('change', function() {
        document.getElementById('rec_block').style.display = 'block';
        this.style.pointerEvents = 'none';
        this.style.opacity = '0.7';
    });
});
</script>

<br><br><br>
{{ next_button }}

{{ endblock }}