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

{% block content %}

<h3><strong>On a scale from 1 to 7, with 1 being Strongly Disagree and 7 being Strongly Agree,
    please rate how much you agree with the below statements:</strong></h3><br>

<table>
    <style>
        table{ border-collapse: collapse; }
        td { width:150px; text-align: center; padding: 5px; vertical-align: center; }
    </style>
    <thead>
        {% for field in form %}
            {% if field.name != 'PEQ_m6' and field.name != 'PEQ_m7' and field.name != 'PEQ_m_explain' %}
            <tr><th scope="col" colspan="7">{{ field.label }}</th></tr>
    </thead>
    <tbody>
        <tr>
            <div style="display: flex">
            {% for choice in field %}
                <td>{{ choice }}<br>
                    <span style="text-align: center">{{ choice.label }}</span>
                </td>
            {% endfor %}
            </div>
        </tr>
            <tr><td colspan="7">&nbsp;</td></tr>
            {% endif %}
        {% endfor %}
</table>

<br><hr><br>

<h3><strong>To what extent did each of the following influence your decision?
    (1 = Not at all, 7 = Completely):</strong></h3><br>

<table>
    <thead>
        <tr><th scope="col" colspan="7">{{ form.PEQ_m6.label }}</th></tr>
    </thead>
    <tbody>
        <tr>
            {% for choice in form.PEQ_m6 %}
                <td>{{ choice }}<br><span>{{ choice.label }}</span></td>
            {% endfor %}
        </tr>
    </tbody>
</table>
<br>
<table>
    <thead>
        <tr><th scope="col" colspan="7">{{ form.PEQ_m7.label }}</th></tr>
    </thead>
    <tbody>
        <tr>
            {% for choice in form.PEQ_m7 %}
                <td>{{ choice }}<br><span>{{ choice.label }}</span></td>
            {% endfor %}
        </tr>
    </tbody>
</table>

<br><hr><br>

<p><strong>{{ form.PEQ_m_explain.label }}</strong></p>
{{ form.PEQ_m_explain }}

<br><br>
{% next_button %}
{% endblock %}