{{ block content }}
<p>
    We will ask you some questions about your attitudes regarding societal issues.
</p>
<br>

<b>How much do you agree with the following statements?</b>
<br>
<br>

<table>
    <tr align="center" style="font-size: smaller">
            <th></th>
            <th>Strongly disagree</th>
            <th>Disagree</th>
            <th>Neither agree nor disagree</th>
            <th>Agree</th>
            <th>Strongly agree</th>
        </tr>
        {{ for field in form }}
        {{ if forloop.counter < 4 }}
        <tr>
            <td align="left" style="min-width:10px; font-size: smaller">{{ field.label }}</td>
            {{ for choice in field }} <td class="answer-column">{{ choice }}</td> {{ endfor }}
        </tr>
        {{ endif }}        
        {{ endfor }}
</table>
<br>
<table>
    <tr align="center" style="font-size: smaller">
            <th></th>
            <th>Strongly disagree</th>
            <th>Disagree</th>
            <th>Neither agree nor disagree</th>
            <th>Agree</th>
            <th>Strongly agree</th>
        </tr>
        {{ for field in form }}
        {{ if forloop.counter > 3 }}
        <tr>
            <td align="left" style="min-width:10px; font-size: smaller">{{ field.label }}</td>
            {{ for choice in field }} <td class="answer-column">{{ choice }}</td> {{ endfor }}
        </tr>
        {{ endif }}        
        {{ endfor }}
</table>
<br>
<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>

    <style>
         input[type="radio"]:checked {
            background-color: #008C3C; /* Change the background color when checked */
            border-color: #008C3C;
        }
    </style>
           <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            background-color: rgba(0, 140, 60, 1);
            color: white;
            font-weight: normal;
        }
        tr:nth-child(even) {
            background-color: rgba(0, 140, 60, 0.1);
        }
        .answer-column {
            width: 150px;
            text-align: center;
        }
        .logo {
            text-align: right;
        }
    </style>
       <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            background-color: rgba(0, 140, 60, 1);
            color: white;
            font-weight: normal;
        }
        tr:nth-child(even) {
            background-color: rgba(0, 140, 60, 0.1);
        }
        .answer-column {
            width: 150px;
            text-align: center;
        }
        .logo {
            text-align: right;
        }
    </style>    
{{ endblock }}