{% block title %}
{% if player.participant.first_practice_order == 0 %}
<div style="display: flex; justify-content: center;">
    <span>Preliminary Round 2</span>
</div>
{% elif player.participant.first_practice_order == 1 %}
<div style="display: flex; justify-content: center;">
    <span>Preliminary Round 1</span>
</div>
{% endif %}
{% endblock %}

{{ block content }}
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 30px;">
<br>
    {% if player.participant.first_practice_order == 0 %}
        <p>Suppose that you were again randomly matched with 2 other participants, and received the <b>low</b> endowment of 15 ECUs.</p>
        <i>How many ECU(s) would you like to contribute to the joint project?</i>
    {% elif player.participant.first_practice_order == 1 %}
        <p>Suppose that you were randomly matched with 2 other participants, and received the <b>low</b> endowment of 15 ECUs.</p>
        <p><i>How many ECU(s) would you like to contribute to the joint project?</i></p>
    {% endif %}
        {{formfields}}
    </div>
<br><br>
<div style = "display: flex; justify-content: center; align-items: right; ">
        <button class="btn btn-danger">Submit</button>

    </div>

<style>
    .btn-next {
        display: block;
        width: 200px;
        margin: 30px auto 0;
        padding: 10px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
    }

    .btn-next:hover {
        background-color: #2980b9;
    }
</style>

</div>
{{ endblock }}