{% extends "global/Page.html" %}
{% block content %}

<style>
  table.prosocial-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
  }
  table.prosocial-table th, table.prosocial-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    vertical-align: bottom;
  }
  table.prosocial-table th:first-child,
  table.prosocial-table td:first-child {
    text-align: left;
    font-weight: bold;
    background-color: #f9f9f9;
  }
  .anchor-label-top {
    font-size: 0.8em;
    font-style: italic;
    color: #555;
    display: block;
    margin-bottom: 4px;
  }
</style>


<h5>Rate your agreement with each of the following statements (1 = Strongly Disagree, 7 = Strongly Agree):</h5>

<table class="prosocial-table">
  <tr>
    <th></th>
    <th><span class="anchor-label-top">Strongly Disagree</span>1</th>
    <th><span class="anchor-label-top">Disagree</span>2</th>
    <th><span class="anchor-label-top">Somewhat Disagree</span>3</th>
    <th><span class="anchor-label-top">Neither Agree<br>Nor Disagree</span>4</th>
    <th><span class="anchor-label-top">Somewhat Agree</span>5</th>
    <th><span class="anchor-label-top">Agree</span>6</th>
    <th><span class="anchor-label-top">Strongly Agree</span>7</th>
  </tr>

  {% for field in form %}
    <tr>
      <td>{{ field.label }}</td>
      {% for i in range(1, 8) %}
        <td><input type="radio" name="{{ field.name }}" value="{{ i }}" required></td>
      {% endfor %}
    </tr>
  {% endfor %}
</table>

{% next_button %}
{% endblock %}