{% extends "base.html" %}
{% block judul %}Belajar — Atlas Histo{% endblock %}

{% block isi %}
<header class="halaman-kepala">
  <div>
    <p class="eyebrow">Progres belajar</p>
    <h1>Belajar, {{ nama }}</h1>
    <p class="hero-teks kecil">Persentase dihitung dari materi kelas Anda saat ini.
      Kalau dosen menambah preparat baru, angkanya bisa turun — itu wajar.</p>
  </div>
</header>

{% if peran == 'mahasiswa' %}
  {% if ringkas %}
    <div class="kisi kisi-belajar">
      {% for k in ringkas %}
        <section class="kartu-panel kartu-kelas">
          <div class="panel-kepala">
            <h2>{{ k.nama }}</h2>
            <span class="hitung">{{ k.persen }}%</span>
          </div>
          <p class="bantuan">{{ k.dipelajari }} dari {{ k.total }} preparat dipelajari.</p>
          <div class="bilah" role="progressbar" aria-valuenow="{{ k.persen }}" aria-valuemin="0" aria-valuemax="100">
            <span style="width:{{ k.persen }}%"></span>
          </div>
          {% if k.belum %}
            <a class="tombol tombol-utama tombol-kecil" href="{{ url_for('preparat', gid=k.belum[0]) }}">
              Lanjutkan: preparat berikutnya
            </a>
          {% elif k.total %}
            <p class="bantuan">Semua materi kelas ini sudah ditandai. Ulangi untuk menguatkan ingatan.</p>
          {% else %}
            <p class="bantuan">Belum ada materi di kelas ini. Dosen belum mengunggah atau membagikan preparat.</p>
          {% endif %}

          {% if k.preparat %}
            <ul class="daftar-admin daftar-belajar">
              {% for p in k.preparat %}
                <li>
                  <span class="tanda {{ 'tanda-ok' if p.dipelajari else '' }}" aria-hidden="true">
                    {{ '✓' if p.dipelajari else '○' }}</span>
                  <span class="daftar-teks">
                    <strong><a href="{{ url_for('preparat', gid=p.id) }}">{{ p.judul }}</a></strong>
                    <small>{{ p.kategori or 'Tanpa kategori' }}</small>
                  </span>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </section>
      {% endfor %}
    </div>
  {% else %}
    <div class="kosong">
      <h3>Belum ikut kelas</h3>
      <p>Masukkan kode kelas dari dosen Anda.</p>
      <a class="tombol tombol-utama" href="{{ url_for('auth.gabung') }}">Gabung kelas</a>
    </div>
  {% endif %}
{% else %}
  <section class="kartu-panel">
    <h2>Kelas yang Anda ampu</h2>
    {% if kelas_dosen %}
      <ul class="daftar-admin">
        {% for k in kelas_dosen %}
          <li>
            <span class="daftar-teks">
              <strong><a href="{{ url_for('belajar.rekap', kelas_id=k.id) }}">{{ k.nama }}</a></strong>
              <small>{{ k.anggota }} mahasiswa · kode {{ k.kode_gabung }}</small>
            </span>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="kosong-kecil">Belum ada kelas. Buat di <a href="{{ url_for('akun.pengguna') }}">Akun &amp; kelas</a>.</p>
    {% endif %}
  </section>
{% endif %}
{% endblock %}