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

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

{% block content %}

<div class="panel-heading">
    <h5>Please read carefully the following statements and indicate to what extent you agree with them.</h5>
</div>

<table class="table">
    <tr><th colspan="7">I felt distracted throughout the study.</th></tr>
    <tr>
        <td colspan="2" style="text-align:left;">Strongly disagree</td>
        <td colspan="3"></td>
        <td colspan="2" style="text-align:right;">Strongly agree</td>
    </tr>
    <tr>{% for choice in form.mot_alert1 %}
        <td style="text-align:center; padding:3px 6px 1px 6px;">{{ choice.label }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.mot_alert1 %}
        <td style="text-align:center; padding:0 6px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr><th colspan="7">I did not take the study very seriously.</th></tr>
    <tr>
        <td colspan="2" style="text-align:left;">Strongly disagree</td>
        <td colspan="3"></td>
        <td colspan="2" style="text-align:right;">Strongly agree</td>
    </tr>
    <tr>{% for choice in form.mot_alert2 %}
        <td style="text-align:center; padding:3px 6px 1px 6px;">{{ choice.label }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.mot_alert2 %}
        <td style="text-align:center; padding:0 6px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
</table>

<table class="table">
    <tr><th colspan="7">I found it easy to concentrate and remain focused throughout the questionnaire.</th></tr>
    <tr>
        <td colspan="2" style="text-align:left;">Strongly disagree</td>
        <td colspan="3"></td>
        <td colspan="2" style="text-align:right;">Strongly agree</td>
    </tr>
    <tr>{% for choice in form.mot_alert3 %}
        <td style="text-align:center; padding:3px 6px 1px 6px;">{{ choice.label }}</td>
        {% endfor %}</tr>
    <tr>{% for choice in form.mot_alert3 %}
        <td style="text-align:center; padding:0 6px;">{{ choice|safe }}</td>
        {% endfor %}</tr>
</table>

{% next_button %}
{% endblock %}