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

    <div id="rec_block" style="display:none; margin-top:20px;">
        {% if player.round_number == 17 %}
        <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_q2 }}</p>
                <p>{{ formfield player.check_q3 }}</p>
        </div>
        {% endif %}
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("rec_block").style.display = "block";
        });
    </script>

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

{{ endblock }}