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

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <p class="text-center">
            How do you think your partner is reacting to your transfer?
        </p>
        <div class="container-fluid" style="max-width: 500px">
            <div class="row justify-content-center no-gutters">
                {% 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 no-gutters">
                {% for v, i in Constants.empathy_values %}
                    <div class="col text-center"><input type="radio" name="empathy" value="{{ v }}"></div>
                {% endfor %}
            </div>
        </div>
        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>
{% endblock %}