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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}

{% block styles %}
    <link href="{% static 'self_assessment/css/style_assess.css' %}" rel="stylesheet">
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}

{% block title %}
    Part {{ part_index }} - Question 1
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}

{% block content %}
<div class="container">
    <p>
        How well do the following statements describe you as a person?
        Please indicate your answer on a scale from 0 to 10.
        A 0 means “does not describe me at all” and a 10 means “describes me perfectly”.
        You can also use any numbers between 0 and 10 to indicate where you fall on the scale,
        like 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10.
    </p>
</div>

<div id="overflow-table">
<table class="table" style="margin-bottom:0px;">
<thead>

{# Wording of level 0 and 10 of the scale #}
<tr id="scale-row">
    <th style="border-right: 1px solid #dee2e6;">
    </th>

    <th class="scale-left">Doesn't describe</th>

    <th colspan="9"></th>

    <th class="scale-right">Describes perfectly</th>
</tr>
</thead>

{# Creating the 10 levels of the scale #}
<tr>
        <th>
        </th>
        {% for i in levels %}
        <td>
            {{ i }}
        </td>
        {% endfor %}
    </tr>


{# Creating the questions #}

   {% for field in form %}
    <tr>
        <th>
            {{ field.label }}
        </th>
       {% for choice in field %}
        <td>
            {{ choice }}
            {% endfor %}
        </td>
    </tr>
    {% endfor %}
</table>
</div>

{% next_button %}

{% endblock %}