{% extends 'base.html' %}
{% block content %}
<div class="card shadow-sm mb-3">
  <div class="card-body">
    <h4 class="mb-1">Tes Seleksi Guru {{ applicant.subject_name }}</h4>
    <p class="mb-0">Peserta: <strong>{{ applicant.full_name }}</strong> ({{ applicant.email }})</p>
  </div>
</div>

<form method="post" class="card shadow-sm">
  <div class="card-body">
    {% for q in questions %}
      <div class="mb-4">
        <p class="fw-semibold mb-2">{{ loop.index }}. {{ q.question_text }}</p>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="q_{{ q.id }}" value="A" id="q{{ q.id }}a" required>
          <label class="form-check-label" for="q{{ q.id }}a">A. {{ q.option_a }}</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="q_{{ q.id }}" value="B" id="q{{ q.id }}b">
          <label class="form-check-label" for="q{{ q.id }}b">B. {{ q.option_b }}</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="q_{{ q.id }}" value="C" id="q{{ q.id }}c">
          <label class="form-check-label" for="q{{ q.id }}c">C. {{ q.option_c }}</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="q_{{ q.id }}" value="D" id="q{{ q.id }}d">
          <label class="form-check-label" for="q{{ q.id }}d">D. {{ q.option_d }}</label>
        </div>
      </div>
      <hr>
    {% endfor %}
    <button class="btn btn-success btn-lg">Kirim Jawaban</button>
  </div>
</form>
{% endblock %}