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

{% block title %}
Do you agree with the following statements?
{% endblock %}

{% block content %}

{{ if session.config.dev_mode }}
<button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<p>
    Do you agree with the following statements?
</p>

<div class="container">
  <table class="table custom-table table-borderless">
    <tbody>
      {{ for field in form }}
        {{ if field.name in ['sports','car', 'illness','will','vacation','lottery','date','portfolio'] }}
        <tr>
            <td colspan="6"><b>{{ field.label }}</b> {{ formfield_errors field.name }}</td>
        </tr>
        <tr height="15px">
            {{ for choice in field }}
          <td class="text-center p-0 m-0">{{ choice }}</td>
          {{ endfor }}
        </tr>

        <tr height="15px">
            {{ for choice in field }}
          <td class="text-center p-0 m-0">{{ choice.label }}</td>
          {{ endfor }}
        </tr>
        <tr class="empty-tr">
            <td colspan="5"></td>
          </tr>
          {% endif %}
        {{ endfor }}
    </tbody>
  </table>
</div>

<button style="float: right" class="btn btn-primary btn-large">Next</button>

{% endblock %}

{% block styles %}

<style>
.custom-table {
  table-layout: fixed;
}
  
.empty-tr {
  line-height: 25px;
  min-height: 25px;
  height: 25px;
}
</style>

{% endblock %}