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

{% block title %}
    Contribute
{% endblock %}


{% block content %}

</p>
    <b>You are {{ my_typedisplay }}.</b>
      <br />
    Remember, tou have an Income of {{ my_endowment }}
    and a Multiplier of {{ my_multiplier }}.

    <br />
    <br />
</p>

</p>
<b>Your partner is {{ opponent_typedisplay }}.</b>
  <br />
You got paired with a partner who has an Income of {{ opponent_endowment }}
and a Multiplier of {{ opponent_multplier }}.

<br />
<br />
</p>


</p>
Please indicate how much you want to <b>contribute</b> to the common account that you share with this person.
<br />
<br />
</p>


{% if my_type == "HH" and opponent_type == "HH" %}

<img src="{% static 'Dia_Type1Type1.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HH" and opponent_type == "HL" %}

<img src="{% static 'Dia_Type1Type2.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HH" and opponent_type == "LH" %}

<img src="{% static 'Dia_Type1Type3.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HH" and opponent_type == "LL" %}

<img src="{% static 'Dia_Type1Type4.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HL" and opponent_type == "HH" %}

<img src="{% static 'Dia_Type2Type1.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HL" and opponent_type == "HL" %}

<img src="{% static 'Dia_Type2Type2.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HL" and opponent_type == "LH" %}

<img src="{% static 'Dia_Type2Type3.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "HL" and opponent_type == "LL" %}

<img src="{% static 'Dia_Type2Type4.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LH" and opponent_type == "HH" %}

<img src="{% static 'Dia_Type3Type1.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LH" and opponent_type == "HL" %}

<img src="{% static 'Dia_Type3Type2.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LH" and opponent_type == "LH" %}

<img src="{% static 'Dia_Type3Type3.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LH" and opponent_type == "LL" %}

<img src="{% static 'Dia_Type3Type4.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LL" and opponent_type == "HH" %}

<img src="{% static 'Dia_Type4Type1.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LL" and opponent_type == "HL" %}

<img src="{% static 'Dia_Type4Type2.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LL" and opponent_type == "LH" %}

<img src="{% static 'Dia_Type4Type3.jpg'%}" height="267" width="400"/>

{% endif %}

{% if my_type == "LL" and opponent_type == "LL" %}

<img src="{% static 'Dia_Type4Type4.jpg'%}" height="267" width="400"/>

{% endif %}

{% formfield player.contribution label="How many units do you want to contribute to the common account?" %}

{% next_button %}




<style>
.otree-timer {
    display: none;
}
</style>

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


{% endblock %}