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

{% block title %}
    Your Choice
{% 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 %}
<p><b>Please choose your option below by clicking the button: </b> </p>

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="2">The Other Participant</th>
            </tr>
            <tr>
                <th>C</th>
                <th>D</th>
            </tr>
            <tr class="highlight-row-on-hover">
                <th rowspan="2"><span class="rotate90">You</span></th>
                <td><button name="decision" value="C" class="btn btn-primary btn-large">Option C</button></td>
             <td>6, 6 </td>
             <td>0,10</td>

            </tr>
            <tr class="highlight-row-on-hover">
                <td><button name="decision" value="D" class="btn btn-primary btn-large">Option D</button></td>
            <td>10,0</td>
            <td>2,2</td>
            </tr>
        </table>
    </div>

<br>
<br>
<br>
<br>
<br>
Instructions is listed below if you need to recall the details.

    {% include Constants.instructions_template %}

{% endblock %}