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

{% block title %}Part 5{% endblock %}

{% block content %}
<style>
    .instruction-container {
        max-width: 800px;
        margin: auto;
        font-size: 16px;
        line-height: 1.5;
    }

    .button-container {
        text-align: center;
        margin-top: 30px;
    }

    .next-button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
    }

    .next-button:hover {
        background-color: #0056b3;
    }

    /* 固定列宽 + 居中对齐选项列 */
    .likert-table{ table-layout:fixed; width:100%; }
    .likert-table .col-statement{ width:50%; }   /* 左侧题干列 */
    .likert-table .col-option{ width:10%; }      /* 后面5列等宽 */

    .likert-table thead th{
      text-align:center;
      white-space:normal;
      word-break:break-word; /* 表头长词可换行 */
    }
    .likert-table tbody th{ text-align:left; font-weight:600; }
    .likert-table td{ text-align:center; }
    .likert-table input[type=radio]{ display:block; margin:0 auto; } /* 单选居中 */


</style>

<div class="instruction-container">
    <h2 style="text-align: center;">Task 1</h2>
</div>


<p>
For each statement, indicate how much you agree or disagree with it. There are no right or wrong answers. Be as accurate and honest as possible. Please respond independently for each statement.
</p>

<table class="table table-striped likert-table">
  <colgroup>
    <col class="col-statement">
    <col class="col-option" span="5">
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Strongly Agree</th>
      <th>Agree</th>
      <th>Neutral</th>
      <th>Disagree</th>
      <th>Strongly Disagree</th>
    </tr>
  </thead>
  <tbody>
    {% for field in form %}
      <tr>
        <th>{{ field.label }}</th>
        {% for option in field %}
          <td>{{ option }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>


<div class="button-container">
    <button type="submit" class="next-button">Next</button>
</div>
{% endblock %}

{% block scripts %}
<script>
    for (let option of document.querySelectorAll('input[type=radio]')) {
        option.required = 'required';
    }
</script>
{% endblock %}