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

{% block title %}
    {% if player.round_number == 1 %}
        Trial Round: Your Answer
    {% else %}
        Your Answer
    {% endif %}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

    <style>
        .highlight-row-on-hover:hover td {
            background-color: #fcf8e3;
        }

    </style>

{% endblock %}

{% block content %}

<img src="{% static "control/control-graph.png" %}" class="center" width="80%" height="80%" />
<br />
<div class="form-group required">
    <p>
        First Person says: "I choose {{group.send_message}}".
        What message do you want to send to First Person?<br>
        This is not your final decision, you can change your option later.
    </p>
    <table class="table table-bordered text-center" style="width: auto; margin: auto">
        <tr>
            <th colspan="2" rowspan="2"></th>

        {% if player.id_in_group == 1 %}

            <th colspan="2">Second Person</th>

        {% else %}

            <th colspan="2">First Person</th>

        {% endif %}

        </tr>
        <tr>
            <th>Choose B</th>
            <th>Choose A</th>
        </tr>
        <tr class="highlight-row-on-hover">
            <th rowspan="2"><span class="rotate90">You</span></th>
            <td><button name="send_answer" value="B" class="btn btn-primary btn-large">I choose B</button></td>
            <td>{{Constants.both_B_payoff}}, {{Constants.both_B_payoff}}</td>
            <td>{{ Constants.YouB_OpponentA_payoff }}, {{Constants.YouA_OpponentB_payoff}}</td>
        </tr>
        <tr class="highlight-row-on-hover">
            <td><button name="send_answer" value="A" class="btn btn-primary btn-large">I choose A</button></td>
            <td>{{Constants.YouA_OpponentB_payoff}}, {{ Constants.YouB_OpponentA_payoff }}</td>
            <td>{{Constants.both_A_payoff}}, {{Constants.both_A_payoff}}</td>
        </tr>
    </table>
</div>


{% endblock %}