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

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

{% block content %}

<div class="panel-heading">
    <h5>Please answer the following questions</h5>
</div>

{% block global_styles %}
<link rel="stylesheet" href="{% static 'global/theme.css' %}">
{% endblock %}

<table class="table">
    <tr>
        <th colspan="7">
            I think that the
            {% if treatment == "FreeTool" %}free tool
            {% elif treatment == "ComplimentaryTool" %}complimentary tool
            {% elif treatment == "Tool" %}tool
            {% elif treatment == "AlternativeVersion" %}alternative version of the task
            {% endif %}
            will/would very ineffective (1) / very effective (7) in improving my performance on the matrices task.
        </th>
    </tr>
    <tr>
        <td colspan="2" style="text-align:left;">Very ineffective</td>
        <td colspan="3"></td>
        <td colspan="2" style="text-align:right;">Very effective</td>
    </tr>
    <tr>
        {% for choice in form.quality_1 %}
        <td style="text-align:center; padding:3px 6px 1px 6px;">{{ choice.label }}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for choice in form.quality_1 %}
        <td style="text-align:center; padding:0 6px;">{{ choice|safe }}</td>
        {% endfor %}
    </tr>
</table>

<table class="table">
    <tr>
        <th colspan="7">
            I think that the
            {% if treatment == "FreeTool" %}free tool
            {% elif treatment == "ComplimentaryTool" %}complimentary tool
            {% elif treatment == "Tool" %}tool
            {% elif treatment == "AlternativeVersion" %}alternative version of the task
            {% endif %}
            will/would very ineffective (1) / very effective (7) in maximizing my final payout.
        </th>
    </tr>
    <tr>
        <td colspan="2" style="text-align:left;">Very ineffective</td>
        <td colspan="3"></td>
        <td colspan="2" style="text-align:right;">Very effective</td>
    </tr>
    <tr>
        {% for choice in form.quality_2 %}
        <td style="text-align:center; padding:3px 6px 1px 6px;">{{ choice.label }}</td>
        {% endfor %}
    </tr>
    <tr>
        {% for choice in form.quality_2 %}
        <td style="text-align:center; padding:0 6px;">{{ choice|safe }}</td>
        {% endfor %}
    </tr>
</table>

<div class="mt-3">
    {% next_button %}
</div>
{% endblock %}