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

{% block title %}
    Your Type
{% endblock %}


{% block content %}


{% if player.type == "HH" %}
    <p>
        You are Type 1.

        Your Type has an Income of 75 and a Multiplier of 1.7.
    </p>

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

{% endif %}

{% if player.type == "HL" %}
    <p>
        You are Type 2.

        Your Type has an Income of 75 and a Multiplier of 1.3.
    </p>

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

{% endif %}

{% if player.type == "LH" %}
    <p>
        You are Type 3.

        Your Type has an Income of 25 and a Multiplier of 1.7.
    </p>

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

{% endif %}

{% if player.type == "LL" %}
    <p>
        You are Type 4.

        Your Type has an Income of 25 and a Multiplier of 1.3.
    </p>

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

{% endif %}


{% 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 %}