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

{% block styles %}
<style>
    .table tr th{ border:none; padding-bottom:0 }
    .table tr td{ border:none }
    .table{ table-layout:fixed; border-collapse:collapse; margin-bottom:60px }
</style>
{% endblock %}

{% block content %}

<div class="panel-heading">
    <h5>You have almost reached the end of the study. However, we still want to ask you a couple of questions.</h5>
</div>
<div class="panel-heading">
    <h5><b>Please indicate how well the following statements describe you.</b></h5>
</div>

<br>

<table class="table">
    <tr>{{ form.reciprocity_1.label }}</tr>
    <tr>{% for choice in form.reciprocity_1 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_1 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_2.label }}</tr>
    <tr>{% for choice in form.reciprocity_2 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_2 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_3.label }}</tr>
    <tr>{% for choice in form.reciprocity_3 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_3 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_4.label }}</tr>
    <tr>{% for choice in form.reciprocity_4 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_4 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_5.label }}</tr>
    <tr>{% for choice in form.reciprocity_5 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_5 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_6.label }}</tr>
    <tr>{% for choice in form.reciprocity_6 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_6 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_7.label }}</tr>
    <tr>{% for choice in form.reciprocity_7 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_7 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_8.label }}</tr>
    <tr>{% for choice in form.reciprocity_8 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_8 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_9.label }}</tr>
    <tr>{% for choice in form.reciprocity_9 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_9 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_10.label }}</tr>
    <tr>{% for choice in form.reciprocity_10 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_10 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr>{{ form.reciprocity_11.label }}</tr>
    <tr>{% for choice in form.reciprocity_11 %}
        <td style="text-align:center; padding:10px 35px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.reciprocity_11 %}
        <td style="text-align:center">{{ choice.label }}</td>
        {% endfor %}</tr>
</table>

{% next_button %}
{% endblock %}