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

{% block title %}
{% endblock %}

{% block content %}

    <div class="wrapper">
        <div class="wrapper instructions">
            <p>
                The other participant sent you {{ other_sent }} credit(s),
                which means you now have the following tripled quantity: {{ sent_by_other_tripled }} credit(s).
            </p>
        </div>


        <div class="wrapper">
            <p class="text-center">
                How do you feel about the amount received from your partner?
            </p>
            <div class="container-fluid" style="max-width: 500px">
                <div class="row justify-content-center">
                    {% for v, i in Constants.empathy_values %}
                        <div class="col text-center"><img src="{% static i %}" style="max-width: 60px; max-height: 60px"></div>
                    {% endfor %}
                </div>
                <div class="row justify-content-center">
                    {% for v, i in Constants.empathy_values %}
                        <div class="col text-center"><input type="radio" name="empathy_self" value="{{ v }}"></div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div align="center">
            <label>
                How much do you want to return to the other participant?<br>
                (This should not exceed the tripled quantity)
            </label>
                {% formfield player.trust_return %}
        </div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>

{% endblock %}