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

{% block title %}
    The Decision Task: Report Your Type
{% endblock %}

{% block content %}

    <p>
    This is round number {{ subsession.round_number }} of {{Constants.num_rounds }}.
    </p>

    <p>
    You are assigned to node {{ player.id_in_group }}.
    </p>

    {% if player.id_in_group == 1 %}
        <p>
            Your neighbours are participants at nodes number 2, 3, 4 and 6. The following picture depicts your neighbourhood:
        </p>
    {% endif %}

    {% if player.id_in_group == 2 %}
        <p>
            Your neighbours are participants at nodes number 1, 3, 4 and 5. The following picture depicts your neighbourhood:
        </p>
    {% endif %}

    {% if player.id_in_group == 3 %}
        <p>
            Your neighbours are participants at nodes number 1, 2 and 5. The following picture depicts your neighbourhood:
        </p>
    {% endif %}

    {% if player.id_in_group == 4 %}
        <p>
            Your neighbours are participants at nodes number 1, 2 and 6. The following picture depicts your neighbourhood:
        </p>
    {% endif %}

    {% if player.id_in_group == 5 %}
        <p>
            Your neighbours are participants at nodes number 2 and 3. The following picture depicts your neighbourhood:
        </p>
    {% endif %}

    {% if player.id_in_group == 6 %}
        <p>
            Your neighbours are participants at nodes number 1 and 4. The following picture depicts your neighbourhood:
        </p>
    {% endif %}

{% if player.id_in_group == 1 %}
<div align="center">
<img src="https://umairsexperiment.s3.us-east-2.amazonaws.com/1.png" style="width:300px;height:300px;"/>
</div>
{% endif %}

{% if player.id_in_group == 2 %}
<div align="center">
<img src="https://umairsexperiment.s3.us-east-2.amazonaws.com/2.png" style="width:300px;height:300px;"/>
</div>
{% endif %}

{% if player.id_in_group == 3 %}
<div align="center">
<img src="https://umairsexperiment.s3.us-east-2.amazonaws.com/3.png" style="width:300px;height:300px;"/>
</div>
{% endif %}

{% if player.id_in_group == 4 %}
<div align="center">
<img src="https://umairsexperiment.s3.us-east-2.amazonaws.com/4.png" style="width:300px;height:300px;"/>
</div>
{% endif %}

{% if player.id_in_group == 5 %}
<div align="center">
<img src="https://umairsexperiment.s3.us-east-2.amazonaws.com/5.png" style="width:300px;height:300px;"/>
</div>
{% endif %}

{% if player.id_in_group == 6 %}
<div align="center">
<img src="https://umairsexperiment.s3.us-east-2.amazonaws.com/6.png" style="width:300px;height:300px;"/>
</div>
{% endif %}



<p>
<style>
    #largeImage1 {position: absolute;height:50%;padding: .5em;background: #e3e3e3;border: 1px solid #BFBFBF;}
</style>


<a id="full_net" href="https://umairsexperiment.s3.us-east-2.amazonaws.com/full.PNG">Show the overall network</a>

<script>
    var offsetX = 20;
    var offsetY = 10;

    $('a').hover(function(e) {
        var href = $(this).attr('href');
        $('<img id="largeImage1" src="' + href + '" alt="big image" />')
        .css('top', e.pageY + offsetY)
        .css('left', e.pageX + offsetX)
        .appendTo('body');
    }, function() {
        $('#largeImage1').remove();
    });

    $('a').mousemove(function(e) {
        $('#largeImage2').remove();
        $("#largeImage1").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    });
</script>
</p>

    <p>
    Your assigned type for this round is {{ player.int_pref }}.
    </p>

<p>{% formfield player.exp_pref label="Please choose your type to be reported in this round" %}</p>

{% if player.id_in_group == 1 or player.id_in_group == 2%}

<p>
<style>
    #largeImage2 {position: absolute;height:30%;width:40%;padding: .5em;background: #e3e3e3;border: 1px solid #BFBFBF;}
</style>


<a id="earnings4" href="https://umairsexperiment.s3.us-east-2.amazonaws.com/four_neighbours.PNG">Show the table of my possible earnings for this round</a>

<script>
    var offsetX = 20;
    var offsetY = 10;

    $('a').hover(function(f) {
        var href = $(this).attr('href');
        $('<img id="largeImage2" src="' + href + '" alt="big image" />')
        .css('top', f.pageY + offsetY)
        .css('left', f.pageX + offsetX)
        .appendTo('body');
    }, function() {
        $('#largeImage2').remove();
    });

    $('a').mousemove(function(f) {
        $("#largeImage2").css('top', f.pageY + offsetY).css('left', f.pageX + offsetX);
    });
</script>
</p>

{% endif %}

{% if player.id_in_group == 3 or player.id_in_group == 4%}

<p>
<style>
    #largeImage2 {position: absolute;height:30%;width:40%;padding: .5em;background: #e3e3e3;border: 1px solid #BFBFBF;}
</style>


<a id="earnings3" href="https://umairsexperiment.s3.us-east-2.amazonaws.com/three_neighbours.PNG">Show the table of my possible earnings for this round</a>

<script>
    var offsetX = 20;
    var offsetY = 10;

    $('a').hover(function(f) {
        var href = $(this).attr('href');
        $('<img id="largeImage2" src="' + href + '" alt="big image" />')
        .css('top', f.pageY + offsetY)
        .css('left', f.pageX + offsetX)
        .appendTo('body');
    }, function() {
        $('#largeImage2').remove();
    });

    $('a').mousemove(function(f) {
        $("#largeImage2").css('top', f.pageY + offsetY).css('left', f.pageX + offsetX);
    });
</script>
</p>

{% endif %}

{% if player.id_in_group == 5 or player.id_in_group == 6%}

<p>
<style>
    #largeImage2 {position: absolute;height:30%;width:40%;padding: .5em;background: #e3e3e3;border: 1px solid #BFBFBF;}
</style>


<a id="earnings2" href="https://umairsexperiment.s3.us-east-2.amazonaws.com/two_neighbours.PNG">Show the table of my possible earnings for this round</a>

<script>
    var offsetX = 20;
    var offsetY = 10;

    $('a').hover(function(f) {
        var href = $(this).attr('href');
        $('<img id="largeImage2" src="' + href + '" alt="big image" />')
        .css('top', f.pageY + offsetY)
        .css('left', f.pageX + offsetX)
        .appendTo('body');
    }, function() {
        $('#largeImage2').remove();
    });

    $('a').mousemove(function(f) {
        $("#largeImage2").css('top', f.pageY + offsetY).css('left', f.pageX + offsetX);
    });
</script>
</p>

{% endif %}


{% if player.id_in_group == 1 %}
        <div style="max-height:60vh; overflow: auto;">
            <table class="table table-sm table-bordered table-striped">
                <thead class="thead-dark">
                <tr >
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Round</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your assinged type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your reported type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your earnings</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Neighbor reports<p>2, 3, 4, 6</p></p></th>
                </tr>
                </thead>
                <tbody>
                {% for p in player.in_previous_rounds %}
                    <tr>
                        <td style="text-align: center; font-size: 1 rem; vertical-align: middle;  "> {{ p.round_number }} </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.int_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.exp_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.payoff }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.neighbor_reports }}  </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

{% endif %}

{% if player.id_in_group == 2 %}
        <div style="max-height:60vh; overflow: auto;">
            <table class="table table-sm table-bordered table-striped">
                <thead class="thead-dark">
                <tr >
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Round</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your assigned type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your reported type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your earnings</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Neighbor reports<p>1, 3, 4, 5</p></p></th>
                </tr>
                </thead>
                <tbody>
                {% for p in player.in_previous_rounds %}
                    <tr>
                        <td style="text-align: center; font-size: 1 rem; vertical-align: middle;  "> {{ p.round_number }} </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.int_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.exp_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.payoff }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.neighbor_reports }}  </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

{% endif %}

{% if player.id_in_group == 3 %}
        <div style="max-height:60vh; overflow: auto;">
            <table class="table table-sm table-bordered table-striped">
                <thead class="thead-dark">
                <tr >
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Round</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your assigned type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your reported type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your earnings</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Neighbor reports<p>1, 2, 5</p></p></th>
                </tr>
                </thead>
                <tbody>
                {% for p in player.in_previous_rounds %}
                    <tr>
                        <td style="text-align: center; font-size: 1 rem; vertical-align: middle;  "> {{ p.round_number }} </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.int_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.exp_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.payoff }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.neighbor_reports }}  </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

{% endif %}

{% if player.id_in_group == 4 %}
        <div style="max-height:60vh; overflow: auto;">
            <table class="table table-sm table-bordered table-striped">
                <thead class="thead-dark">
                <tr >
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Round</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your assigned type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your reported type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your earnings</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Neighbor reports<p>1, 2, 6</p></p></th>
                </tr>
                </thead>
                <tbody>
                {% for p in player.in_previous_rounds %}
                    <tr>
                        <td style="text-align: center; font-size: 1 rem; vertical-align: middle;  "> {{ p.round_number }} </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.int_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.exp_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.payoff }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.neighbor_reports }}  </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

{% endif %}

{% if player.id_in_group == 5 %}
        <div style="max-height:60vh; overflow: auto;">
            <table class="table table-sm table-bordered table-striped">
                <thead class="thead-dark">
                <tr >
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Round</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your assigned type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your reported type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your earnings</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Neighbor reports<p>2, 3</p></p></th>
                </tr>
                </thead>
                <tbody>
                {% for p in player.in_previous_rounds %}
                    <tr>
                        <td style="text-align: center; font-size: 1 rem; vertical-align: middle;  "> {{ p.round_number }} </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.int_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.exp_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.payoff }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.neighbor_reports }}  </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

{% endif %}

{% if player.id_in_group == 6 %}
        <div style="max-height:60vh; overflow: auto;">
            <table class="table table-sm table-bordered table-striped">
                <thead class="thead-dark">
                <tr >
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Round</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your assigned type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your reported type</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Your earnings</p></th>
                    <th style="text-align: center; font-size:0.8rem; vertical-align:middle;"> <p>Neighbor reports<p>1, 4</p></p></th>
                </tr>
                </thead>
                <tbody>
                {% for p in player.in_previous_rounds %}
                    <tr>
                        <td style="text-align: center; font-size: 1 rem; vertical-align: middle;  "> {{ p.round_number }} </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.int_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.exp_pref }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.payoff }}  </td>
                        <td style="text-align: center; font-size: 0.9rem; vertical-align: middle; "> {{ p.neighbor_reports }}  </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

{% endif %}

{% if subsession.round_number > 1 %}
    <p>Your total earnings at the end of round {{ prev_rounds }} were {{ total_payoff }}. </p>
{% endif %}

{% next_button %}

{% endblock %}