{% extends "base.html" %}
{% block title %}Survey — {{ task.name }}{% endblock %}

{% block content %}
<div class="page-narrow">
  <div class="card">
    <div class="badge">{{ task.badge }}</div>
    <h1 class="card-title">{{ task.name }} — After-task survey</h1>
    <p class="card-subtitle">Please answer these questions about the task you just completed.</p>

    <form method="POST" action="/survey/{{ task.id }}/submit">

      <!-- Comprehension questions -->
      <section class="survey-section">
        <h2>Comprehension questions</h2>
        <p class="hint-text">Short answers are fine.</p>
        {% for question in task.comprehension %}
        <div class="form-group">
          <label for="comprehension_{{ loop.index0 }}">{{ loop.index }}. {{ question }}</label>
          <textarea
            id="comprehension_{{ loop.index0 }}"
            name="comprehension_{{ loop.index0 }}"
            rows="3"
            placeholder="Your answer…"
          ></textarea>
        </div>
        {% endfor %}
      </section>

      <!-- Likert scale -->
      <section class="survey-section">
        <h2>Rate each statement (1 = Strongly disagree, 5 = Strongly agree)</h2>
        <div class="likert-table">
          <div class="likert-header">
            <span class="likert-statement">Statement</span>
            <div class="likert-scale-labels">
              <span>1<br/><small>Strongly<br/>disagree</small></span>
              <span>2</span>
              <span>3</span>
              <span>4</span>
              <span>5<br/><small>Strongly<br/>agree</small></span>
            </div>
          </div>
          {% for key, label in likert_items %}
          <div class="likert-row">
            <span class="likert-statement">{{ label }}</span>
            <div class="likert-options">
              {% for v in [1,2,3,4,5] %}
              <label class="likert-radio">
                <input type="radio" name="likert_{{ key }}" value="{{ v }}" required />
                <span class="radio-vis"></span>
              </label>
              {% endfor %}
            </div>
          </div>
          {% endfor %}
        </div>
      </section>

      <!-- Open-ended description -->
      <section class="survey-section">
        <div class="form-group">
          <label for="ai_description"><strong>Briefly describe how you used the AI assistant for this task</strong></label>
          <textarea
            id="ai_description"
            name="ai_description"
            rows="4"
            placeholder="Your description…"
          ></textarea>
        </div>
      </section>

      <button type="submit" class="btn btn-primary btn-lg">Continue →</button>
    </form>
  </div>
</div>
{% endblock %}