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

{% block title %}
<center>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>

<p>
    You are player B.
    {% if group.message == 0 %}
        Player A did not send a message.
    {% else %}
        Player A sent you the message <i>"The state is {{group.message}}".</i>
    {% endif %}
</p>
<p>
    Please choose your action by clicking the corresponding button below.
</p>

<table>
<tbody>
  <tr>
    <td><button name="action" value=1 class="btn btn-primary btn-large">I choose action 1</button></td>
    <td><button name="action" value=2 class="btn btn-primary btn-large">I choose action 2</button></td>
    <td><button name="action" value=3 class="btn btn-primary btn-large">I choose action 3</button></td>
    <td><button name="action" value=4 class="btn btn-primary btn-large">I choose action 4</button></td>
    <td><button name="action" value=5 class="btn btn-primary btn-large">I choose action 5</button></td>
  </tr>
</tbody>
</table>

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