{% 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;
    }

table td{
    border: 0px;
}
table, th, td {
  border: 0px;
  text-align: left;
}
input[type="radio"] {
    margin-top: 0px;
    margin-left: 0px;
    vertical-align: middle;
    text-align:center;
}

</style>
{% endblock %}

{% block title %}
    Social Media
{% endblock %}

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


    <table class="table" border="0px">
        <tr>
            <td width="50%"></td>
            <th>Strongly Agree</th>
            <th></th>
            <th></th>
            <th style="text-align:center;">Neither Agree nor Disagree </th>
            <th></th>
            <th></th>
            <th style="text-align:right;">Strongly Disagree</th>
        </tr>
    </table>
    <table class="table" border="0px">
        {% for field in form %}
        <tr>
            <th width="50%">{{ field.label|linebreaks }}</th>
            {% for choice in field %}
                <td>{{ choice }}</td>
            {% endfor %}
        </tr>
    {% endfor %}
    </table>

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


{% endblock %}