{% extends "base.html" %}
{% block title %}Final Questionnaire{% endblock %}

{% block content %}
<div class="page-narrow">
  <div class="card">
    <h1 class="card-title">Final Questionnaire</h1>
    <p class="card-subtitle">Please answer these questions after completing all programming tasks.</p>

    <form method="POST" action="/final/submit">

      <!-- 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 questions -->
      <section class="survey-section">
        <h2>Open-ended questions</h2>
        {% for key, question in open_questions %}
        <div class="form-group">
          <label for="{{ key }}"><strong>{{ question }}</strong></label>
          <textarea
            id="{{ key }}"
            name="{{ key }}"
            rows="4"
            placeholder="Your answer…"
          ></textarea>
        </div>
        {% endfor %}
      </section>

      <button type="submit" class="btn btn-primary btn-lg">Submit &amp; Finish →</button>
    </form>
  </div>
</div>
{% endblock %}