{{ extends "global/Page.html" }}
{{ block title }}
Questionnaire
{{ endblock }}

{{ block content }}
<table class="likert">
    <tr class="likert">
        <th class="likert label"> </th>
        <th class="likert data">-5</th>
        <th class="likert data">-4</th>
        <th class="likert data">-3</th>
        <th class="likert data">-2</th>
        <th class="likert data">-1</th>
        <th class="likert data">0</th>
        <th class="likert data">1</th>
        <th class="likert data">2</th>
        <th class="likert data">3</th>
        <th class="likert data">4</th>
        <th class="likert data">5</th>
    </tr>
    {% for field in form %}
    <tr class="likert">
        <td class="likert label">{{ field.label }}</td>
        {% for choice in field %}
        <td class="likert data">{{ choice }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
</table><br>
<center>-5 = Completely unwilling to take risks, 5 = Very willing to take risks</center>

{{ next_button }}
{{ endblock }}

{{ block styles }}
<style>
    th.likert {
        border-bottom: 1px solid #FFFFFF;
        height: 100px;
        text-align: center;
        padding: 15px;
    }

    td.likert {
        border-bottom: 1px solid #FFFFFF;
        padding: 15px;
    }

    td.label {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
    }

    th.label {
        width: 30%;
        min-width: 30%;
        max-width: 30%;
    }

    th.data {
        text-align: center;
        width: 7%;
        min-width: 7%;
        max-width: 7%;
    }

    td.data {
        text-align: center;
        width: 7%;
        min-width: 7%;
        max-width: 7%;
    }

    .form-check-input {
        position: relative;
        margin: 0;
    }
</style>
{{ endblock }}