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

{% block styles %}
    <style>

        .otree-body {
            background-color: white;
        }

        .otree-btn-next {
            background-color: green;
            align: right;
            colour: green;
        }
        .otree-title {
            color: black;
        }

        h {
            font-weight: bold;
        }
</style>
{% endblock %}

{% block title %}
    Survey
{% endblock %}

{% block content %}
<div class="w3-light-grey w3-tiny">
    <div class="w3-container w3-green" style='width:67%'>67%</div>
</div>

    <table class="table" border="0px">
        <tr>
            <td ></td>
            <th style="text-align:center" width="125px">Extremely Liberal</th>
            <th style="text-align:center" width="85px"></th>
            <th style="text-align:center" width="125px">Extremely Conservative</th>
        </tr>
    </table>

    <table class="table" border="0px">
    {% for field in form %}
        <tr>
            <th>{{ field.label|linebreaks }}</th>
            <td width="30px"></td>
            {% for choice in field %}
                <td width="35px">{{ choice }}</td>
            {% endfor %}
            <td width="27.5px"></td>
        </tr>
    {% endfor %}
    </table>



    <div align ="right">
        {% next_button %}
    </div>

{% endblock %}