{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 1100px;">
  <div class="card shadow-sm">
    <div class="card-header bg-light"><strong>Employee - Appraisal Feedback Form</strong></div>

    <form method="post" class="card-body">
      {% for q in questions %}
        <div class="border rounded p-3 mb-3">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <div class="fw-semibold">{{ loop.index }}. {{ q.question_text }}</div>
              <div class="text-muted small">Weight: {{ q.weight }}</div>
            </div>
            <div style="min-width: 160px;">
              <select class="form-select" name="q_{{ q.id }}" required>
                <option value="">Rating</option>
                {% for r in range(1,6) %}
                  <option value="{{ r }}" {% if amap.get(q.id) and amap.get(q.id).rating == r %}selected{% endif %}>{{ r }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <textarea class="form-control mt-2" name="c_{{ q.id }}" rows="2" placeholder="Optional comment">{{ amap.get(q.id).comment if amap.get(q.id) else "" }}</textarea>
        </div>
      {% endfor %}

      <div class="text-end">
        <button class="btn btn-primary">Submit</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}