{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
    <link href="{% static 'global/empty.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
    Part 3 - Decision
{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
    p.time {
      background-color: white;
      color: grey;
      text-align: right;
    }
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 25) {
                $('.otree-timer').show();
            }
        });
    });
</script>

<p class="time">
    Time: {{ time }} seconds. 
</p>


<p> 
    <br>
    Now, you have to declare how many cents you will send to the two -2-   
    {% if group.r_aux_g2 >= 0.5  %}
    team members 
    {% else %}
    participants
    {% endif %} in Role B <b>if</b> 
    you are assigned to Role A. 
    After this, the roles will be randomly assigned. 
</p>
<p>
    &#9702; The money sent by Role A is equally divided among the two -2-
        {% if group.r_aux_g2 >= 0.5  %}
        team members 
        {% else %}
        participants
        {% endif %}  
        in Role B.  
    </p>
    <p>
    &#9702; The {% if group.r_aux_g2 >= 0.5  %}
    team member 
    {% else %}
    participant
    {% endif %} in Role A keeps the remainder (73 cents - sent money).
</p>

<p><br>
    Please, <b>declare the amount</b> that you will <b>sent to the two -2- 
    {% if group.r_aux_g2 >= 0.5  %}
    team members 
    {% else %}
    participants
    {% endif %} in Role B</b> 
    <u><b>if</b></u> you are <b>assigned Role A</b> (0 to 73 cents):
    <table>
        <tr><td> {% formfield player.transfer label = "" %} </td>
        <td style="vertical-align:middle"> &nbsp; cents. &emsp;</td></tr>
        </table>
</p>

<p>
    Please click "Next" to continue. 
</p>

    {% next_button %}    

{% endblock %}