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

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

{% block content %}

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% trans "How did you experience others behaving towards you?" %}<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 %}
{% if "feel_others" not in field.name %}
<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>
{% endif %}
{% endfor %}
</tbody>
</table>

<div class="mb-3">
    <div class="card bg-light mb-3">
        <div class="card-body">
            <p>
            {% if language == "fr" %}
            Pour les questions ci-dessous merci d'indiquer votre réponse sur une échelle de 0 (rien) à 5 (max).
            {% else %}
            For the questions below, please select a value from 0 (nothing) to 5 (max).
            {% endif %}
            </p>
        </div>
    </div>
    {% for field in form %}
    {% if "feel_others" in field.name %}
    <div class="card mb-1">
        <div class="card-body">
            {{ field.label }} <br> {{ field }}
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>

{% 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 %}