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

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

{% block content %}

<div class="card mb-3">
    <div class="card-body">
        <p>
            {% trans "Please write down three emotions you are feeling right now" %}
        </p>
        <div class="row">
            <div class="col-4">
                <label for="id_game_emotion_1">Emotion 1</label>
                <input type="text" name="game_emotion_1" id="id_game_emotion_1">
            </div>
            <div class="col-4">
                <label for="id_game_emotion_2">Emotion 2</label>
                <input type="text" name="game_emotion_2" id="id_game_emotion_2">
            </div>
            <div class="col-4">
                <label for="id_game_emotion_2">Emotion 3</label>
                <input type="text" name="game_emotion_3" id="id_game_emotion_3">
            </div>
        </div>
    </div>
</div>


<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% trans "To what degree do you feel ..." %} <br>
            <em>{% trans "Please indicate in a scale from 0 (nothing) to 5 (max)." %}</em>
        </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 "emotion" 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>

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