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

{% block styles %}
<link rel="stylesheet" href="{% static 'apps/SOCIAL_PREFERENCES/css/AppStyles.css' %}">
{% endblock %}

{% block title %}
Social Preferences &ndash; 2nd step
{% endblock %}

{% block content %}
<div id="content-box">
    You play another game with player A (you are player B).
    This time, there are two payoff options (left two columns and right two columns),
    and you (=player B) decide which payoff you choose.
    Please indicate whether you accept the left or the right split.
    <br><br>
    <table>
        <thead>
        <tr>
            <th>A's Payoff</th>
            <th>B's Payoff</th>
            <th>Your Decision</th>
            <th>A's Payoff</th>
            <th>B's Payoff</th>
        </tr>
        <tr>
            <th colspan="2"></th>
            <th>left<span class="space-between"></span>right</th>
            <th colspan="2"></th>
        </tr>
        </thead>
        <tbody>
        {% for field in form %}
        <tr>
            <td>20€</td>
            <td>0€</td>
            <td>{{ field }}</td>
            <td>{{ forloop.counter0 }}€</td>
            <td>{{ forloop.counter0 }}€</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<div id="button-box">{% next_button %}</div>
{% endblock %}