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

{% block title %}
<center>Results of round {{subsession.round_number}}</center>
{% endblock %}

{% block styles %}
<style type="text/css">
table { font-size:22px; text-align:center; }
table th { background-color:#ccc; color:black; padding-top:10px; padding-bottom:10px; padding-left:4px; padding-right:4px;}
table td { background-color:#fff; color:black; padding-top:10px; padding-bottom:10px; padding-left:4px; padding-right:4px;}
</style>
{% endblock %}

{% block content %}

<p>
    Below you see the table containing the earnings for both players for every combination of state and action.
</p>
<ul>
    <li>
        For player A, the earnings are the number on the left (shown in <span style='color: #0000ff;'>blue</span>).
    </li>
    <li>
         For player B, the earnings are the number on the right (shown in <span style='color: #ff0000;'>red</span>).
    </li>
</ul>

<center>
    <p id="table"></p>
</center>


<ul>
    <li>
        The state was {{group.state}}.
    </li>
    <li>
        Player A sent the message "The state is {{group.message}}".
    </li>
    <li>
        Player B chose action {{group.action}}.
    </li>
</ul>

<p>
    You were
    {% if player.role == 'sender' %}
        player A.
    {% else %}
        player B.
    {% endif %}
    Therefore, in this round you
    {% if player.payoff > 0 %}
        earned {{player.payoff}}.
    {% else %}
        lost {{player.payoff}}.
    {% endif %}
</p>

{% if subsession.round_number == Constants.num_rounds %}
    <p>
        This was the last round.
        For the remaining of the experiment, you are requested to complete a few additional questionnaires.
        For the first three, you can earn more points.
    </p>
    <center><button class="otree-btn-next btn btn-primary">Proceed</button></center>
{% else %}
    <center><button class="otree-btn-next btn btn-primary">Proceed to next round</button></center>
{% endif %}

{% endblock %}

{% block scripts %}

<script type="text/javascript">
  window.onload=function makeTable() {
  var sender_matrix = {{sender_matrix}}
  var receiver_matrix = {{receiver_matrix}}
  var result = "<table border=1>";
  result += "<tr><th></th>"
    for(var i=0; i<sender_matrix.length; i++){
            result += "<th>Action is "+(i+1)+"</th>";
        }
    result += "</tr>"
    for(var i=0; i<sender_matrix.length; i++) {
        result += "<tr><th> State is " + (i+1) +"</th>";
        for(var j=0; j<sender_matrix[i].length; j++){
            result +=
            " <td><span style=\"color:blue\">"
            + sender_matrix[i][j]
            + "</span> , <span style=\"color:red\", \"text-align:right\">"
            + receiver_matrix[i][j] +"</span></td>";
        }
        result += "</tr>";
    }
    result += "</table>";

  document.getElementById("table").innerHTML = result;
}
</script>
{% endblock %}