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

{% 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>
      If you think about the 5 probationary officers you are closest to in your house, how do you think their traits have changed since the lockdown began:    </p>

    <div class="radio_table">
      <table class="table table-sm table-striped">
        <thead>
          <tr class="text-center">
            <th scope="col"></th>
            <th scope="col">Reduced</th>
            <th scope="col">Remained Constant</th>
            <th scope="col">Increased</th>
          </tr>
        </thead>
        {% for field in form %}
        {% if field.name|slice:":6" == 'covid_' %}
          <tr>
            <th>{{ field.label }}</th>
            {% for choice in field %}
            <td class="text-center">{{ choice }}</td>
            {% endfor %}
          </tr>
        {% endif %}
        {% endfor %}
      </table>
    </div>
  </div>

  <div class="section">
    {% formfield player.three_words %}
  </div>

  <div class="section">
    {% formfield player.time_to_normal %}
  </div>

  {% next_button %}
</div>

{% endblock %}