{% 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 <b>player A</b>. The randomly drawn state is
    <img src="{% static image_path %}" width="100" height="100"> (<b>{{group.state}}</b>).
</p>

<p>
    Please choose a message to send to Player B by clicking the corresponding button below.
</p>

<table>
<tbody>
  <tr>
    <td><button name="message" value=1 class="btn btn-primary btn-large">Send the message "The state is 1"</button></td>
    <td><button name="message" value=2 class="btn btn-primary btn-large">Send the message "The state is 2"</button></td>
    <td><button name="message" value=3 class="btn btn-primary btn-large">Send the message "The state is 3"</button></td>
  </tr>
  <tr>
    <td><button name="message" value=4 class="btn btn-primary btn-large">Send the message "The state is 4"</button></td>
    <td><button name="message" value=5 class="btn btn-primary btn-large">Send the message "The state is 5"</button></td>
    <td><button name="message" value=0 class="btn btn-primary btn-large">I don't want to send a message</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 %}