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

{% block title %}

Questionnaire B

{% endblock %}

{% block content %}

<br />

<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"> &euro;30, &euro;30 </td>
        <td style="text-align: center"> &euro;30, &euro;70 </td>
    </tr>
    <tr>
        <td style="text-align: center"> Option B </td>
        <td style="text-align: center"> &euro;70, &euro;30 </td>
        <td style="text-align: center"> &euro;0, &euro;0 </td>
    </tr>
</table>

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