{% extends "global/BaseLikert.html" %}
{% load staticfiles otree_tags %}


{% block title %}
{% endblock %}

{% block content %}

    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse-me"
                       class="btn-block">
                        Your task:
                        <span id="collapse-icon"
                              class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                </h4>
            </div>
            <div class="panel-body collapse" id="collapse-me">
                On this page, there is a list with different personality traits.
                Probably, some personality traits will fully apply to you, while others do not apply to you at all.
                Other traits may apply to you to some extent.
                <br><br>
                Please rate each trait, as it applies to you, on the following scale:
                <br><br>
                1 = <b>does not apply to you at all</b>.
                <br>
                7 = <b>does fully apply to you</b>.
                <br><br>
                Values between 1 and 7 are possible if you do not fully agree or disagree.
            </div>
        </div>
    </div>

    <!-- You can find a template to the following Likert table in ~/global/TemplateLikertTable.html -->
    <!-- specify labels on outermost poles of the Likert scale. -->
    <br>
    {% with "Does not<br>apply at all" as left %}
        {% with "Fully<br>applies" as right %}
            <table>
                <tr>
                    <th>I am a person who</th>
                    <td align="right">{{ left }}</td>
                    <!-- specify number of points in scale. -->
                    <th class="scale">
                        <div class="scale-head">1</div>
                        <div class="scale-head">2</div>
                        <div class="scale-head">3</div>
                        <div class="scale-head">4</div>
                        <div class="scale-head">5</div>
                        <div class="scale-head">6</div>
                        <div class="scale-head">7</div>
                    </th>
                    <td>{{ right }}</td>
                </tr>

                {% for field in form %}
                    <tr>
                        <td colspan="2">{{ field.label }}</td>
                        <td class="scale">{{ field }}</td>
                        <td></td>
                    </tr>
                {% endfor %}
            </table>
        {% endwith %}
    {% endwith %}

    <br><br>
    {% next_button %}

{% endblock %}