{% extends "global/Page.html" %}
{% load otree static %}

{% block scripts %}
<script type="text/javascript" src="{% static "global/js/radio_table.js" %}"></script>
<script type="text/javascript">
    $(function () {
        hideRadioLabels()
    })
</script>
{% endblock %}
{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/radio_table.css" %}">
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
<div class="wrapper">
  <div class="section">
    <p>
      For each of the traits below, if you could change how much of that trait you possess, would you like to increase, keep constant, or decrease your level?
    </p>
  </div>

  <div class="radio_table">
    <table class="table table-sm table-striped">
      <thead>
        <tr class="text-center">
          <th scope="col"></th>
          <th scope="col">Reduce</th>
          <th scope="col">Keep constant</th>
          <th scope="col">Increase</th>
        </tr>
      </thead>
      {% for field in form %}
      <tr>
        <th>{{ field.label }}</th>
        {% for choice in field %}
        <td class="text-center">{{ choice }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </table>
  </div>

  {% next_button %}
</div>
{% endblock %}