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

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


{% block title %}
    Part 2 - Instructions and 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 === 15) {
                $('.otree-timer').show();
            }
        });
    });
</script>

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

    <div class="wrapper instructions"> 
    <p>
        Now, the <b>fourth payment</b> opportunity: here, you have the chance to update 
        your private guess. The payment rule is the same: $2 if your guess is within 3 points
        of the average. <br>
        <hr>
        Before doing so, you can pay to see the public guess of one of  
        {% if group.r_aux_g2 >= 0.5  %}
        your fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span>
            {% endif %}
            members
        {% else %}
        the other two participants 
        {% endif %}
        (which one will be determined randomly). 
        <br>
        <br>
        You will indicate the maximum amount of money (between 0 and 100 cents) 
        you are willing to pay to see the public guess of one of  
        {% if group.r_aux_g2 >= 0.5  %}
        your fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span>
            {% endif %}
            members
        {% else %}
        the other two participants 
        {% endif %}
        Then, the actual price to see the public guess will be determined by a random number between 0 and 100. 
    </p>
    <p style="margin-left: 40px">
        If the amount of money you are willing to pay is the <b>same or higher</b> as this randomly drawn price, 
        the <b>price</b> will be deducted from your payment, and you will see the public guess of one of 
        one of  
        {% if group.r_aux_g2 >= 0.5  %}
        your fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span>
            {% endif %}
            members.
        {% else %}
        the other two participants.
        {% endif %} 
        <br>
        <br>
        If the amount of money you are willing to pay is <b>below</b> this randomly drawn price, 
        no money will be deducted from your payment, and you will not see the public guess of another
        {% if group.r_aux_g2 >= 0.5  %}
         fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span>
            {% endif %}
            member.
        {% else %}
        participant. 
        {% endif %} 
    </p>
    <p>
        Your best interest is served by simply reporting the maximum amount that you would pay for seeing 
        the public guess of another         
        {% if group.r_aux_g2 >= 0.5  %}
        fellow 
           {% if pet == 0 %} 
           <span style="color:red">R team</span>
           {% elif pet == 1 %} 
           <span style="color:blue">D team</span>
           {% endif %}
           member.
       {% else %}
       participant. 
       {% endif %}  
        In any case, you will have the chance to update your private guess.  
    </p>
    </div>
    <hr>
    <p>
        Please indicate the maximum amount of money (0-100 cents) you are willing to pay to see another
        {% if group.r_aux_g2 >= 0.5  %}
        fellow 
           {% if pet == 0 %} 
           <span style="color:red">R team</span>
           {% elif pet == 1 %} 
           <span style="color:blue">D team</span>
           {% endif %}
           member's 
       {% else %}
       participant's 
       {% endif %} 
        public guess.
        <table>
            <tr><td> {% formfield player.offer label = "" %} </td>
            <td style="vertical-align:middle"> &nbsp; cents. &emsp;</td></tr>
            </table>
    </p>

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

    {% next_button %}

    <hr>
    
    <div class="wrapper instructions">
        <p><b>Reminder of Payment opportunities (only one will be paid out)</b><br>
            {% if group.r_aux_g2 >= 0.5  %}
            This rules apply to your 
                {% if pet == 0 %} 
                <span style="color:red">R team</span>
                {% elif pet == 1 %} 
                <span style="color:blue">D team</span>
                {% endif %}
            {% else %}
            This rules apply to you and the other participants.
            {% endif %}
        </p>  
    
        <p>
            Rules for the <b>first payment opportunity</b>:<br>
        </p>
        <p  style="margin-left: 40px"  >
            If the average is 
            {% if group.r_aux_g1 >= 0.5 %} larger than 60, {% else %} smaller than 40, {% endif %} 
            {% if group.r_aux_g2 >= 0.5  %}
            you and your fellow 
                {% if pet == 0 %} 
                <span style="color:red">R team</span>
                {% elif pet == 1 %} 
                <span style="color:blue">D team</span>
                {% endif %}
            members will each get a <b>payment of $2</b>.
            {% else %}
            you will get a payment of $2.
            {% endif %}<br>
            Otherwise nothing ($0). 
        </p>
    
        <p>
            Rules for the <b>second payment opportunity</b>:<br>
        </p>
        <p  style="margin-left: 40px"  >
            $2 if your private guess is within three (3) units of the average.</p>
    
        <p>
            Rules for the <b>third payment opportunity</b>:<br>
        </p>
        <p  style="margin-left: 40px"  >
            $2 if your public guess is within three (3) units of the average.</p>
    
        <p>
            Rules for the <b>fourth payment opportunity</b>:<br>
        </p>
        <p  style="margin-left: 40px"  >
            $2 if your public guess is within three (3) units of the average.</p>
    
        <p>
    </div>
    
    

{% endblock %}