{{ block title }}
    Energiesicherheit
{{ endblock }}

{% block content %}
    <p> Wie besorgt sind Sie, wenn überhaupt, dass in der Zukunft ... </p>
    <span style='font-size: 0.85rem; color: #6c757d; display: block; margin-top: 0px;'>
        (Falls Sie mit Ihrem Handy an der Umfrage teilnehmen, wechseln Sie bitte ins Querformat für eine korrekte Darstellung der Tabelle.)
    </span>
    <table class="table table-bordered" >
    <colgroup>
        <col style="width: 75%;">   <!-- Attribute column -->
        <col style="width: 5%;"> <!-- Land A column -->
        <col style="width: 5%;"> <!-- Land B column -->
        <col style="width: 5%;"> <!-- Land B column -->
        <col style="width: 5%;"> <!-- Land B column -->
        <col style="width: 5%;"> <!-- Land B column -->
</colgroup>
<thead>
<tr >
    <th> </th>
<th> überhaupt <br>nicht <br>besorgt </th>
<th> <br><br> eher <br>nicht <br>besorgt </th>
<th> <br><br> eher <br>besorgt </th>
<th> <br><br> sehr <br>besorgt </th>
    <th> <br><br> weiß <br>ich <br>nicht </th>
</tr>
</thead>
<tbody>
{% for field in form %}
        <tr>
            <td align="left" >{{ field.label }}</td>
            {% for choice in field %}
                <td align="center">{{ choice }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>



<style>
tr:nth-child(even) {background-color: #f9f9f9;}
th {
text-align:center;
width: 10%;
}
input[type="radio"]{margin-left:-5.5px}
</style>

    <br>
    <button class="otree-btn-next btn btn-primary">Weiter</button>
{% endblock %}