{{ block title }}
    Round {{player.round_number}} of {{C.NUM_ROUNDS}}
{{ endblock }}
{{ block content }}
    <br>
    <div style="display:flex; gap:40px; justify-content:left;">
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedIII.jpg' %}" alt="Closed envelope:first option" width="140">
            <div>Option A</div>
        </div>
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedIII.jpg' %}" alt="Closed envelope:second option" width="140">
            <div>Option B</div>
        </div>
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedIII.jpg' %}" alt="Closed envelope:third option" width="140">
            <div>Option C</div>
        </div>
        <div style="text-align:center;">
            <img src="{% static 'envelope_closedIII.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 style="color:black; font-weight:bold;">
                {{ recommended_option }}
            </b>
        </p>
        <p>{{ formfield player.final_choice }}</p>

        {% if player.round_number == 16 %}
        <br><br>
        <div style="margin-top:20px; padding:10px; border:1px solid #ccc">
            <p>Before you continue, please answer these brief check-in questions:</p>
                <p>{{ formfield player.check_q1 }}</p>
                <p>{{ formfield player.check_q2 }}</p>
        </div>
        {% endif %}
    </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 }}