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

{% block title %}
{% trans "Part 2 - Questionnaire 4" %}
{% endblock %}

{% block content %}

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% trans "How would you characterize your behavior towards other players?" %}<br>
            {% trans "Please indicate in a scale from 0 (nothing) to 5 (max)." %}
        </p>
    </div>
</div>

<table class="table table-sm table-striped mb-3">
    <thead>
    <tr>
        <th></th>
        <th>0</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
    </tr>
    </thead>
<tbody>
{% for field in form %}
<tr>
    <th>{{ field.label }}</th>
    <td><input type="radio" name="{{field.name}}" id="id_{{field.name}}_0" value="0" required="required"></td>
    <td><input type="radio" name="{{field.name}}" id="id_{{field.name}}_1" value="1" required="required"></td>
    <td><input type="radio" name="{{field.name}}" id="id_{{field.name}}_2" value="2" required="required"></td>
    <td><input type="radio" name="{{field.name}}" id="id_{{field.name}}_3" value="3" required="required"></td>
    <td><input type="radio" name="{{field.name}}" id="id_{{field.name}}_4" value="4" required="required"></td>
    <td><input type="radio" name="{{field.name}}" id="id_{{field.name}}_5" value="5" required="required"></td>
</tr>
{% endfor %}
</tbody>
</table>

<p class="mb-3 text-muted">
    {% blocktrans trimmed %}
    Empathy is our feeling of awareness toward other people's emotions and an attempt to understand
    how they feel.
    {% endblocktrans %}
</p>

{% next_button %}
{% endblock %}

{% block scripts %}
<script src="{% static 'fill_auto.js' %}"></script>
<script>
    window.onload = function (){
        if (js_vars.fill_auto)
            fill_auto();
    }
</script>
{% endblock %}