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

{% block title %}
    Decision {{ round }}
{% endblock %}

{% block content %}
    {% tracking_time %}
    {% tracking_focus %}
   <div class="wrapper">
            <label>
                {% blocktrans trimmed with round=round rounds=rounds %}
                    <b>   Round {{ round }} of {{ rounds }} </b>
                {% endblocktrans %}
            </label>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width:{{ progress|json }}%;">
                    <span class="sr-only"></span>
                </div>
            </div>
            <br>
        <div class="card">
                <div class="card-header">
                    You have been matched with a members of your group <b>X</b> and a member of the other group <b>Y</b> by random. Please distribute a total of {{ Constants.endowment }} between them and yourself.
                    Please note that with 50% probability, you will get what you offered to <b>X</b> and with the remaining 50% probability, you will get what you offered to <b>Y</b>.
                </div>
                <table class="table">
                    <tr>
                        <td>

                            {% for field in form %}
                                {% if field.name  == 'offer_2' %}
                                    {% formfield field label="How many of the 100 points do you wish to offer <b>X</b>" %}
                                {% elif field.name == 'offer_3' %}
                                    {% formfield field label="How many of the 100 points do you wish to offer <b>Y</b>" %}
                                {% else %}
                                    {% formfield field label="How many of the 100 points do you wish to keep <b>yourself</b>" %}
                                {% endif %}
                            {% endfor %}

                        </td>
                    </tr>

                </table>
        </div>
   </div>
    <br>
    {% next_button %}

{% endblock %}