{% extends "global/Page.html" %}
{% block title %}Values and Attitudes Survey{% endblock %}
{% block content %}
<style>
    .likert-container { max-width: 900px; margin: 0 auto; }
    .likert-instructions { background: #f0f4ff; border-left: 4px solid #667eea; padding: 20px; border-radius: 4px; margin-bottom: 24px; }
    .likert-instructions p { margin: 8px 0; color: #1f2937; line-height: 1.6; }
    .likert-instructions p:first-child { margin-top: 0; }
    
    .likert-table { width: 100%; border-collapse: collapse; }
    .likert-table th, .likert-table td { padding: 12px 8px; text-align: center; border: 1px solid #d1d5db; }
    .likert-table th { background: #f3f4f6; font-weight: 600; color: #1f2937; font-size: 13px; }
    .likert-table th:first-child { text-align: left; }
    .likert-table td:first-child { text-align: left; background: #fafbfc; font-weight: 500; color: #1f2937; max-width: 350px; padding: 12px 12px; }
    
    .likert-radio { cursor: pointer; }
    .likert-radio input[type="radio"] { cursor: pointer; width: 18px; height: 18px; }
    
    button { margin-top: 24px; }
</style>

<div class="likert-container">
  <div class="likert-instructions">
    <p><strong>Values and Attitudes Survey</strong></p>
    <p>Please indicate your level of agreement with each statement below, using a scale from 1 (Strongly Disagree) to 5 (Strongly Agree).</p>
  </div>

  <form method="post">
    <table class="likert-table">
      <thead>
        <tr>
          <th></th>
          <th>Strongly<br>Disagree (1)</th>
          <th>Disagree (2)</th>
          <th>Neutral (3)</th>
          <th>Agree (4)</th>
          <th>Strongly<br>Agree (5)</th>
        </tr>
      </thead>
      <tbody>
        {% for stmt_index, statement in statements %}
          <tr>
            <td>{{ statement }}</td>
            <td class="likert-radio">
              <input type="radio" name="likert_{{ stmt_index }}" value="1" id="likert_{{ stmt_index }}_1">
            </td>
            <td class="likert-radio">
              <input type="radio" name="likert_{{ stmt_index }}" value="2" id="likert_{{ stmt_index }}_2">
            </td>
            <td class="likert-radio">
              <input type="radio" name="likert_{{ stmt_index }}" value="3" id="likert_{{ stmt_index }}_3">
            </td>
            <td class="likert-radio">
              <input type="radio" name="likert_{{ stmt_index }}" value="4" id="likert_{{ stmt_index }}_4">
            </td>
            <td class="likert-radio">
              <input type="radio" name="likert_{{ stmt_index }}" value="5" id="likert_{{ stmt_index }}_5">
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>

    <button type="submit">Submit Responses</button>
  </form>
</div>
{% endblock %}