{% 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 %}
    Importance of Skills
{% endblock %}

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

    <p>
        In your opinion, which of the following skills and assets are important for a candidate to have?
    </p>

    <table class="table" border="0px">
        <tr>
            <td width="50%"></td>
            <th width="25%">&#x2193; Very Important</th>

            <th width="25%" align="right" style="text-align:right;">Not Very Important &#x2193;</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 %}