{% 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{
        table-layout: fixed;
    }
    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:82%'>82%</div>
</div>

<p>
    We are trialling a recruitment system that uses social media data we would like to ask you a few questions
    about your opinion on social media and its use in recruitment.
</p>

    <h>
        About how often do you visit or use...
    </h>



    <table class="table" border="0px">
        <tr>
            <td ></td>
            <th>Many times a day</th>
            <th>A few times a day</th>
            <th>About once a day</th>
            <th>A few times a week </th>
            <th>Every few weeks</th>
            <th>Less often</th>
            <th>Never</th>
        </tr>
        {% for field in form %}
        <tr>
            <th>{{ field.label|linebreaks }}</th>
            {% for choice in field %}
                <td>{{ choice }}</td>
            {% endfor %}
        </tr>
    {% endfor %}



    </table>

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


{% endblock %}