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

{% block title %}

Part 3B

{% endblock %}

{% block content %}

<br />

<center>

<table class="table" style="border-bottom: 1px solid #DCDCDC">
    <tr>
        <th> </th>
        <th> </th>
        <th colspan="2" style="text-align: center"> The Other Participant's Choice </th>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td style="text-align: center"> Option A </td>
        <td style="text-align: center"> Option B </td>
    </tr>
    <tr>
        <th rowspan="2" style="text-align: center; vertical-align: middle"> Your Choice </th>
        <td style="text-align: center"> Option A </td>
        <td style="text-align: center"> &pound;30, &pound;30 </td>
        <td style="text-align: center"> &pound;30, &pound;70 </td>
    </tr>
    <tr>
        <td style="text-align: center"> Option B </td>
        <td style="text-align: center"> &pound;70, &pound;30 </td>
        <td style="text-align: center"> &pound;0, &pound;0 </td>
    </tr>
</table>

</center>

<p align="center">
    <i> Table 1: Possible Results </i>
</p>

<br />

<p align="justify">
    Secondly, <b> make a choice</b>.
</p>

<br />

<p align="center">
    Which option do you choose against the other participant?
</p>

<center>

<table class="w3-table">
    {% for field in form %}
    <tr>
        <td style="width: 150px; text-align: center"> Option A </td>
        <td style="width: 150px; text-align: center"> Option B </td>
    </tr>
    <tr>
        {% for choice in field %}
        <td style="text-align: center"> &emsp; &nbsp; {{ choice.tag }} </td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>

</center>

<br />
<br />

<center> {% next_button %} </center>

{% endblock %}