{{ block title }}
    Energieverbrauch
{{ endblock }}

{% block content %}
    <p> Bitte geben Sie an, wie stark Sie den folgenden Aussagen zustimmen.
    <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>
    </p>
    <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> stimme <br>überhaupt <br>nicht <br>zu </th>
<th> <br><br> stimme <br>eher <br>nicht <br>zu </th>
<th> <br><br> weder <br>noch </th>
<th> <br><br> stimme <br>eher <br>zu </th>
<th> <br><br> stimme <br>voll <br>zu </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 %}