{{ extends 'global/Page.html' }}
{{ block title }}Round {{player.round_number}}{{ endblock }}

{{ block content }}

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    var startTime = new Date();

    var nextButton = document.querySelector('.otree-btn-next');
    if (nextButton) {
        nextButton.addEventListener('click', function() {
            var endTime = new Date();
            var timeSpent = endTime - startTime; // time in milliseconds
            document.getElementById('time_spent').value = timeSpent;
        });
    }
});
</script>

<p style="font-weight: bold; font-size: 20px;">Please choose your preferred lottery:</p>
<br>

{% if participant.counterbalance == 1 %}
    {% if participant.order6 == 1 %} 
    <center> 
        <img src="{{ static 'lottery/fixed_.png' }}" style="max-width: 17%; height: auto; margin-right: 15px;" />
        <img src="{{ static 'lottery/mid_5_.png' }}" style="max-width: 17%; height: auto;" />
    </center>
    {% else %} 
    <center> 
        <img src="{{ static 'lottery/mid_5_.png' }}" style="max-width: 17%; height: auto; margin-right: 15px;" />
        <img src="{{ static 'lottery/fixed_.png' }}" style="max-width: 17%; height: auto;" />
    </center>
    {% endif %}
        
{% elif participant.counterbalance == 2 %}
    {% if participant.order6 == 1 %} 
    <center> 
        <img src="{{ static 'lottery/c_fixed_.png' }}" style="max-width: 17%; height: auto; margin-right: 15px;" />
        <img src="{{ static 'lottery/c_mid_5_.png' }}" style="max-width: 17%; height: auto;" />
    </center>
    {% else %} 
    <center>
        <img src="{{ static 'lottery/c_mid_5_.png' }}" style="max-width: 17%; height: auto; margin-right: 15px;" />
        <img src="{{ static 'lottery/c_fixed_.png' }}" style="max-width: 17%; height: auto;" />
    </center>
    {% endif %}
{% endif %}

<br>
<center>
    <label>
        <input type="radio" name="Lottery" value="1" />
    </label>
    <label style="margin-left: 170px;">
        <input type="radio" name="Lottery" value="2" />
    </label>
</center>


<input type="hidden" name="time_spent" id="time_spent" />
 
<br><br>
{{ next_button }}


{{ endblock }}