{% 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, have you ever actively attempted to change that trait in yourself?
    </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</th>
          <th scope="col">No</th>
          <th scope="col">If yes, how?</th>
        </tr>
      </thead>
      {% for field in form %}
        {% if field.field.widget.input_type == 'radio' %}
        <tr>
          <th>{{ field.label }}</th>
          {% for choice in field %}
            <td class="text-center">{{ choice }}</td>
          {% endfor %}
        {% else %}
          <td> {{ field }} </td>
        </tr>
        {% endif %}
      {% endfor %}
    </table>
  </div>

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