{% extends "base.html" %}
{% block judul %}Soal {{ nomor }} — {{ ujian.judul }}{% endblock %}

{% block isi %}
<header class="halaman-kepala">
  <div>
    <p class="eyebrow">{{ ujian.judul }}</p>
    <h1>Soal {{ nomor }} dari {{ jumlah }}</h1>
  </div>
  <div class="aksi-kepala">
    {% if sisa is not none %}
      <span class="lencana-waktu" data-hitung-mundur="{{ sisa }}" aria-live="polite">
        {{ '%02d:%02d'|format(sisa // 60, sisa % 60) }}</span>
    {% endif %}
    <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('ujian.selesai', ujian_id=ujian.id) }}"
       data-konfirmasi="Kumpulkan sekarang? Soal yang belum dijawab tidak bisa diisi lagi.">Kumpulkan</a>
  </div>
</header>

<article class="soal-ujian">
  <p class="soal-tanya">{{ soal.pertanyaan }}</p>

  <figure class="panggung-soal">
    <img src="{{ url_for('foto', nama=(soal.file_proxy or soal.file_gambar)) }}"
         alt="Preparat {{ soal.judul }}" class="foto-soal">
    <span class="titik-soal" style="left:{{ soal.x_pos }}%;top:{{ soal.y_pos }}%"
          aria-label="Struktur yang ditunjuk"></span>
  </figure>

  <form method="post" action="{{ url_for('ujian.soal', ujian_id=ujian.id, nomor=nomor) }}"
        class="form" data-form-jawab data-soal="{{ soal.id }}">
    {{ csrf_input() }}
    {% if soal.tipe == 'pilihan_ganda' %}
      <fieldset class="bidang">
        <legend>Pilih satu jawaban</legend>
        {% for p in pilihan %}
          <label class="pilihan">
            <input type="radio" name="pilihan" value="{{ loop.index0 }}"
                   {{ 'checked' if jawaban and jawaban.pilihan == loop.index0 else '' }}>
            <span>{{ p }}</span>
          </label>
        {% endfor %}
      </fieldset>
    {% else %}
      <div class="bidang">
        <label for="teks">Nama struktur atau fungsinya</label>
        <input id="teks" name="teks" maxlength="500" autocomplete="off" autofocus
               value="{{ jawaban.teks if jawaban and jawaban.teks else '' }}"
               placeholder="Tulis jawaban Anda">
        <small class="bantuan">Boleh ejaan Indonesia atau Inggris; salah ketik kecil ditoleransi.</small>
      </div>
    {% endif %}
    <button class="tombol tombol-utama lebar" type="submit">
      {{ 'Kumpulkan' if nomor == jumlah else 'Simpan & lanjut' }}</button>
  </form>

  <p class="bantuan">Soal {{ nomor }} / {{ jumlah }}.
    Jawaban tersimpan otomatis saat Anda menekan tombol.</p>
</article>
{% endblock %}

{% block skrip %}
<script src="{{ url_for('static', filename='ujian.js') }}?v=1"></script>
{% endblock %}