{% 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; 1st step
{% endblock %}

{% block content %}
<div id="content-box">
    You play a game with another person. You are person B.
    Person A has 20 Euro, and decides how to split the money between you two.
    Once player A has made a suggested split, you (player B) can accept or reject it.
    If you reject it, both of you get 0 Euro.
    If you accept it, then both of you get player A‘s suggested split.
    Please indicate below, which suggested split you would accept or reject.
    <br><br>
    <table>
        <thead>
        <tr>
            <th>#</th>
            <th>A's Payoff</th>
            <th>B's Payoff</th>
            <th colspan="3">Decision</th>
        </tr>
        </thead>
        <tbody>
        {% for field in form %}
        <tr>
            <td class="css-bold">{{ forloop.counter }}</td>
            {% for payoff in payoff_list_player_A %}
            {% if forloop.counter == forloop.parentloop.counter %}
            <td>{{ payoff }}€</td>
            {% endif %}
            {% endfor %}
            {% for payoff in payoff_list_player_B %}
            {% if forloop.counter == forloop.parentloop.counter %}
            <td>{{ payoff }}€</td>
            {% endif %}
            {% endfor %}
            <td class="css-align-right">accept</td>
            <td>{{ field }}</td>
            <td class="css-align-left">reject</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<div id="button-box">{% next_button %}</div>
{% endblock %}