{% 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 wanted to change how much of that trait you possess (as you indicated in the previous question), are you confident that you could change it?
    </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">Yes, I am confident</th>
          <th scope="col">No, I think it would be hard to change it</th>
          <th scope="col">I don't want to change</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 %}