{% load otree %}

{{ block title }}Final Survey{{ endblock }}

{{ block content }}

<p>
    How common do you think the following stereotypes are about <strong>your gender</strong>?
</p>
<p>
{#  Choose a number between 1 and 5, where 1 means "extremely uncommon" and 5 means "extremely common."#}
    Choose from "Extremely Uncommon" to "Extremely Common."
</p>

<style>
  .likert-table {
    table-layout: fixed;
    width: 100%;
  }
  .likert-table th,
  .likert-table td {
    text-align: center;
    vertical-align: middle;
    white-space: normal;
  }
  .likert-table th:first-child,
  .likert-table td:first-child {
    text-align: left;
    width: 40%;
  }
  .likert-table th:not(:first-child),
  .likert-table td:not(:first-child) {
    width: 12%;
  }
</style>

<table class="table table-striped likert-table">
  <tr>
    <th></th>
    <th>Extremely Uncommon</th>
    <th>Moderately Uncommon</th>
    <th>Neutral</th>
    <th>Moderately Common</th>
    <th>Extremely Common</th>
  </tr>
  {{ for field in form }}
  <tr>
    <th>{{ field.label }}</th>
    {{ for option in field }}
    <td>{{ option }}</td>
    {{ endfor }}
  </tr>
  {{ endfor }}
</table>

<div style="text-align:center">
    {{ next_button }}
</div>
{% include "final_survey/_debug_autofill.html" %}
{{ endblock }}