{% extends "base.html" %}
{% block judul %}Nilai {{ peta.nama }} — Informatika UNTAN{% endblock %}
{% block isi %}
  <div class="nav-baris">
    <div>MK ini: <a href="/rps/{{ peta.kode }}">RPS</a> · <a href="/rps/{{ peta.kode }}/rtm">RTM</a> · <b>Input Nilai</b> · <a href="/portofolio/{{ peta.kode }}">Portofolio</a></div>
  </div>

  <h1>Input Nilai — {{ peta.nama }} <span style="color:var(--grey)">({{ peta.kode }})</span></h1>

  <p class="keterangan">Skor per Sub-CPMK digulung ke CPMK lalu CPL (rincian di halaman <a href="/metodologi">Metodologi</a>).</p>

  {% if kelas_dosen is not none %}
  <div class="info">Anda hanya mengampu kelas <b>{{ kelas_dosen|join(', ') }}</b> pada MK ini —
    daftar &amp; tombol di bawah cuma menampilkan mahasiswa kelas tersebut.</div>
  {% endif %}

  {% if pesan %}<div class="info">{{ pesan }}</div>{% endif %}
  {% for w in peringatan %}<div class="peringatan">{{ w }}</div>{% endfor %}

  {% if komponen_daftar %}
  <h2 class="bagian">ISI PER KOMPONEN</h2>
  <table class="grid" style="max-width:760px">
    <thead>
      <tr>
        <th>Komponen</th>
        <th class="tengah" style="width:90px">Sub-CPMK</th>
        <th class="tengah" style="width:70px">Bobot</th>
        <th class="tengah" style="width:150px">Status</th>
        <th class="tengah" style="width:110px"></th>
      </tr>
    </thead>
    <tbody>
      {% for k in komponen_daftar %}
      <tr>
        <td>{{ k.nama }}<br><span style="font-size:12px;color:var(--grey)">{{ 'boleh diisi berkali-kali' if k.ulang else 'sekali-jalan' }}</span></td>
        <td class="tengah">{{ k.n_subs }}</td>
        <td class="tengah">{% if k.bobot %}{{ k.bobot }}%{% else %}—{% endif %}</td>
        <td class="tengah">
          {% if k.ulang %}
            {% if k.n_sesi %}<span class="stamp stamp-ok">{{ k.n_sesi }} SESI</span>{% else %}<span class="stamp stamp-draft">BELUM ADA SESI</span>{% endif %}
          {% else %}
            {% if k.n_sesi %}<span class="stamp stamp-ok">SUDAH DIISI</span>{% else %}<span class="stamp stamp-draft">BELUM DIISI</span>{% endif %}
          {% endif %}
        </td>
        <td class="tengah">
          <a class="tombol garis" style="padding:4px 12px;font-size:13px" href="/nilai/{{ peta.kode }}/komponen/{{ k.i }}">
            {{ 'Sesi Baru' if k.ulang else ('Edit' if k.n_sesi else 'Isi') }}
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  {% if tersimpan %}
    <div class="info">
      Data tersimpan: mode
      <b>{% if tersimpan.data.mode == 'per_mahasiswa' %}PER MAHASISWA ({{ tersimpan.data.mahasiswa|length }} mahasiswa){% else %}BUKTI AGREGAT (rata-rata kelas){% endif %}</b>
      — terakhir disimpan {{ tersimpan.updated_at }}{% if tersimpan.updated_by %} oleh {{ tersimpan.updated_by }}{% endif %}.
      {% if riwayat_ringkas %}<br>Ringkasan pengisian — team teaching:
        {% for k in riwayat_ringkas %}{{ k.komponen }}: {% for d in k.per_dosen %}{{ d.n }}&times; {{ d.nama }}{{ ', ' if not loop.last }}{% endfor %}{{ ' · ' if not loop.last }}{% endfor %}.{% endif %}
      <form method="post" action="/nilai/{{ peta.kode }}" style="display:inline;margin-left:8px"
            onsubmit="return confirm('Hapus SELURUH nilai tersimpan MK ini untuk {{ tahun }}? Tindakan ini tidak bisa dibatalkan.')">
        <button class="tombol garis" type="submit" name="aksi" value="hapus"
                style="color:var(--red);border-color:var(--red);padding:2px 10px;font-size:13px">Mulai Ulang (hapus semua nilai)</button>
      </form>
    </div>
  {% endif %}

  {% if riwayat %}
  <details class="cara-alt" style="margin:16px 0">
    <summary style="font-size:13px">Log Lengkap Pengisian Nilai ({{ riwayat|length }} entri)</summary>
    <div class="gulir" style="margin-top:8px;max-height:320px;overflow-y:auto">
    <table class="grid">
      <thead><tr><th style="width:140px">Waktu</th><th>Dosen</th><th>Aksi</th><th style="width:140px">Komponen</th></tr></thead>
      <tbody>
        {% for r in riwayat %}
        <tr>
          <td>{{ r.at or '—' }}</td>
          <td>{{ r.by or '—' }}</td>
          <td>{{ r.aksi }}</td>
          <td>{{ r.komponen or '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
  </details>
  {% endif %}

  {% set ada_kelas = grid and grid|selectattr('kelas')|list|length > 0 %}
  {% if ada_kelas %}
  {% set semua_kelas = grid|map(attribute='kelas')|select|unique|sort|list %}
  <div class="filter-baris">
    <label for="filter-kelas">Tampilkan kelas:</label>
    <select id="filter-kelas" style="width:auto">
      <option value="">Semua</option>
      {% for k in semua_kelas %}
      <option value="{{ k }}">Kelas {{ k }}</option>
      {% endfor %}
    </select>
    <span id="filter-kelas-info" class="keterangan" style="margin:0"></span>
  </div>
  {% endif %}

  {% if grid and tabel_komponen and komponen_daftar %}
  <h2 class="bagian">NILAI PER KOMPONEN <span style="font-weight:normal;font-style:italic;color:var(--grey)">— nilai mahasiswa berdasarkan komponen</span></h2>
  <p class="keterangan">Angka = rata-rata skor mentah tiap sesi/tugas komponen itu yang diikuti mahasiswa (bukan lewat Sub-CPMK). Ketik untuk menimpa —
    ditulis rata ke semua Sub-CPMK komponen itu; rincian per Sub-CPMK tetap presisi di grid bawah.</p>
  <form method="post" action="/nilai/{{ peta.kode }}">
    <input type="hidden" name="aksi" value="komponen">
    <div class="gulir">
    <table class="grid">
      <thead>
        <tr>
          <th style="width:44px" class="tengah">No.</th>
          <th style="width:112px">NIM</th>
          <th style="min-width:150px">Nama</th>
          {% for k in komponen_daftar %}<th class="tengah" style="font-size:11px;min-width:90px">{{ k.nama }}</th>{% endfor %}
          <th class="tengah" style="width:80px">Nilai Akhir</th>
        </tr>
      </thead>
      <tbody>
        {% for r in tabel_komponen %}
        {% set ri = loop.index0 %}
        <tr data-kelas="{{ r.kelas or '' }}">
          <td class="tengah">{{ loop.index }}
            <input type="hidden" name="nim_{{ ri }}" value="{{ r.nim }}">
            <input type="hidden" name="nama_{{ ri }}" value="{{ r.nama }}"></td>
          <td>{{ r.nim }}</td>
          <td>{{ r.nama }}</td>
          {% for k in komponen_daftar %}
          <td class="isian"><input type="number" name="komp_{{ ri }}_{{ k.i }}"
            min="0" max="100" step="any"
            value="{{ '%g'|format(r.nilai[k.i]) if r.nilai[k.i] is not none else '' }}"></td>
          {% endfor %}
          <td class="tengah"><b>{{ '%.1f'|format(akhir.get(r.nim)) if akhir.get(r.nim) is not none else '—' }}{% if r.nim in tidak_lengkap and akhir.get(r.nim) is not none %}<span title="Belum semua Sub-CPMK ternilai — angka ini sementara">*</span>{% endif %}</b></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% if tidak_lengkap %}
    <p class="keterangan" style="margin-top:6px">* Sebagian Sub-CPMK mahasiswa ini belum ternilai — Nilai Akhir dihitung hanya dari yang sudah ternilai dan bisa berubah setelah sisanya diisi.</p>
    {% endif %}
    <div class="aksi-baris">
      <span style="color:var(--grey);font-size:13px">Disimpan atas nama <b>{{ user.nama }}</b></span>
      <span class="spacer"></span>
      <button class="tombol" type="submit">Simpan Nilai Komponen</button>
    </div>
  </form>
  {% endif %}

  {% if grid %}
  {% set per_mhs = tersimpan and tersimpan.data.mode == 'per_mahasiswa' %}
  <h2 class="bagian">NILAI PER MAHASISWA <span style="font-weight:normal;font-style:italic;color:var(--grey)">— nilai mahasiswa berdasarkan Sub-CPMK</span></h2>
  <form method="post" action="/nilai/{{ peta.kode }}">
    <div class="gulir">
    {% set n_kiri = 4 if ada_kelas else 3 %}
    <table class="grid">
      <thead>
        <tr>
          <th style="width:44px" class="tengah">No.</th>
          <th style="width:112px">NIM</th>
          <th style="min-width:150px">Nama</th>
          {% if ada_kelas %}<th style="width:60px" class="tengah">Kelas</th>{% endif %}
          {% for s in peta.subs %}<th class="tengah" style="font-size:11px;min-width:62px">{{ s.kode }}</th>{% endfor %}
          <th class="tengah" style="width:80px">Nilai Akhir</th>
        </tr>
      </thead>
      <tbody>
        {% for m in grid %}
        {% set i = loop.index0 %}
        <tr data-kelas="{{ m.kelas or '' }}">
          <td class="tengah">{{ loop.index }}
            <input type="hidden" name="nim_{{ i }}" value="{{ m.nim }}">
            <input type="hidden" name="nama_{{ i }}" value="{{ m.nama }}"></td>
          <td>{{ m.nim }}</td>
          <td>{{ m.nama }}</td>
          {% if ada_kelas %}<td class="tengah">{{ m.kelas or '—' }}</td>{% endif %}
          {% for s in peta.subs %}
          <td class="isian"><input type="number" name="skor_{{ i }}_{{ s.kode }}"
            min="0" max="100" step="any"
            value="{{ '%g'|format(m.skor[s.kode]) if s.kode in m.skor else '' }}">{% if (m.nim, s.kode) in dikatrol %}<span title="Nilai ini dikoreksi manual (beda dari hasil hitung sesi/tugas komponen) — bisa tertimpa balik kalau sesi/komponen yang mengukur Sub-CPMK ini disimpan lagi">✎</span>{% endif %}</td>
          {% endfor %}
          <td class="tengah"><b>{{ '%.1f'|format(akhir.get(m.nim)) if akhir.get(m.nim) is not none else '—' }}{% if m.nim in tidak_lengkap and akhir.get(m.nim) is not none %}<span title="Belum semua Sub-CPMK ternilai — angka ini sementara">*</span>{% endif %}</b></td>
        </tr>
        {% endfor %}
        {% if per_mhs and hasil %}
        <tr class="total" data-kelas="__total__" title="Dihitung dari seluruh mahasiswa MK ini, tidak per kelas">
          <td colspan="{{ n_kiri }}" style="text-align:right">Rata-rata kelas (tersimpan)</td>
          {% for s in peta.subs %}
          {% set info = hasil.sub.get(s.kode) %}
          <td class="tengah">{{ '%.1f'|format(info.rata) if info else '—' }}</td>
          {% endfor %}
          <td class="tengah">{{ '%.1f'|format(akhir.values()|sum / akhir|length) if akhir else '—' }}</td>
        </tr>
        <tr class="total" data-kelas="__total__" title="Dihitung dari seluruh mahasiswa MK ini, tidak per kelas">
          <td colspan="{{ n_kiri }}" style="text-align:right">% lulus (≥ {{ ambang|round(0)|int }})</td>
          {% for s in peta.subs %}
          {% set info = hasil.sub.get(s.kode) %}
          <td class="tengah" {% if info and info.lulus_pct is not none and info.rata < ambang %}style="color:var(--red)"{% endif %}>{{ '%.0f'|format(info.lulus_pct) ~ '%' if info and info.lulus_pct is not none else '—' }}</td>
          {% endfor %}
          <td></td>
        </tr>
        {% endif %}
      </tbody>
    </table>
    </div>
    {% if tidak_lengkap %}
    <p class="keterangan" style="margin-top:6px">* Sebagian Sub-CPMK mahasiswa ini belum ternilai — Nilai Akhir dihitung hanya dari yang sudah ternilai dan bisa berubah setelah sisanya diisi.</p>
    {% endif %}
    {% if dikatrol %}
    <p class="keterangan" style="margin-top:6px">✎ = nilai sudah dikoreksi manual di sini (beda dari hasil hitung sesi/tugas komponennya) — hati-hati, koreksi ini akan tertimpa balik kalau sesi/komponen yang mengukur Sub-CPMK itu diisi/disimpan lagi.</p>
    {% endif %}
    <div class="aksi-baris">
      <span style="color:var(--grey);font-size:13px">Disimpan atas nama <b>{{ user.nama }}</b></span>
      <span class="spacer"></span>
      <button class="tombol" type="submit" name="aksi" value="grid">Simpan Nilai</button>
    </div>
  </form>
  {% endif %}

  {% if kelompok or tabel_poin or bobot_komponen or hasil %}
  <details class="cara-alt" style="margin-top:26px;border:1px solid #c9c9c9;padding:10px 14px">
    <summary>DETAIL TAMBAHAN — Kelompok Capaian, Skala Poin, Rincian Bobot &amp; Hasil Ketercapaian</summary>

  {% if kelompok %}
  <h2 class="bagian">KELOMPOK CAPAIAN — ATAS / TENGAH / BAWAH <span style="font-weight:normal;font-style:italic;color:var(--grey)">(acuan norma: mean &plusmn; SD kelas ini, bukan ambang kelulusan)</span></h2>
  <p class="keterangan">Batas: Atas &gt; {{ '%.1f'|format(kelompok.batas_atas) }} · Bawah &lt; {{ '%.1f'|format(kelompok.batas_bawah) }} — untuk melihat sebaran capaian relatif dalam kelas ini, pelengkap tabel Hasil Ketercapaian (acuan ambang tetap) di bawah.</p>
  <div class="gulir">
  <table class="grid" style="max-width:540px">
    <thead><tr><th style="width:44px" class="tengah">No.</th><th style="width:112px">NIM</th><th>Nama</th><th class="tengah" style="width:90px">Nilai Akhir</th><th class="tengah" style="width:80px">Kelompok</th></tr></thead>
    <tbody>
      {% set ns = namespace(no=0) %}
      {% for label, kelas, warna, daftar in [('Atas', 'kelompok-atas', '#205020', kelompok.atas), ('Tengah', 'kelompok-tengah', '#7a5c00', kelompok.tengah), ('Bawah', 'kelompok-bawah', 'var(--red)', kelompok.bawah)] %}
        {% for m in daftar %}
        {% set ns.no = ns.no + 1 %}
        <tr class="{{ kelas }}">
          <td class="tengah">{{ ns.no }}</td>
          <td>{{ m.nim }}</td>
          <td>{{ m.nama }}</td>
          <td class="tengah">{{ '%.1f'|format(m.akhir) }}</td>
          <td class="tengah" style="color:{{ warna }};font-weight:bold">{{ label }}</td>
        </tr>
        {% endfor %}
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% endif %}

  {% if tabel_poin %}
  {% set ada_kelas_p = tabel_poin|selectattr('kelas')|list|length > 0 %}
  {% set n_kiri_p = 4 if ada_kelas_p else 3 %}
  <h2 class="bagian">NILAI PER MAHASISWA — SKALA POIN <span style="font-weight:normal;font-style:italic;color:var(--grey)">— nilai yang sama, ditampilkan sebagai poin yang didapat dari total 100 (lihat rincian bobot di bawah); hanya tampilan, bukan isian</span></h2>
  <div class="gulir">
  <table class="grid">
    <thead>
      <tr>
        <th style="width:44px" class="tengah">No.</th>
        <th style="width:112px">NIM</th>
        <th style="min-width:150px">Nama</th>
        {% if ada_kelas_p %}<th style="width:60px" class="tengah">Kelas</th>{% endif %}
        {% for s in peta.subs %}<th class="tengah" style="font-size:11px;min-width:70px">{{ s.kode }}</th>{% endfor %}
        <th class="tengah" style="width:90px">Total</th>
      </tr>
    </thead>
    <tbody>
      {% for m in tabel_poin %}
      <tr>
        <td class="tengah">{{ loop.index }}</td>
        <td>{{ m.nim }}</td>
        <td>{{ m.nama }}</td>
        {% if ada_kelas_p %}<td class="tengah">{{ m.kelas or '—' }}</td>{% endif %}
        {% for s in peta.subs %}
        {% set p = m.poin.get(s.kode) %}
        <td class="tengah" style="font-size:12px">{% if p %}{{ '%.2f'|format(p.dapat) }}/{{ '%.2f'|format(p.maks) }}{% else %}—{% endif %}</td>
        {% endfor %}
        <td class="tengah"><b>{{ '%.2f'|format(m.total) }}</b></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% endif %}

  {% if bobot_komponen %}
  <h2 class="bagian">RINCIAN BOBOT PENILAIAN <span style="font-weight:normal;font-style:italic;color:var(--grey)">— bobot komponen (RPS bagian G) dibagi rata ke Sub-CPMK-nya; murni dari RPS, tak bergantung nilai</span></h2>
  <div class="gulir">
  <table class="grid" style="max-width:820px">
    <thead><tr><th>Komponen</th><th class="tengah">Bobot</th><th class="tengah">Jumlah Sub-CPMK</th><th class="tengah">Poin per Sub-CPMK</th><th class="tengah">Verifikasi (Jumlah × Poin)</th></tr></thead>
    <tbody>
      {% for k in bobot_komponen %}
      <tr>
        <td>{{ k.nama }}</td>
        <td class="tengah">{{ '%g'|format(k.bobot) }}%</td>
        <td class="tengah">{{ k.n_subs }}</td>
        <td class="tengah">{{ '%.2f'|format(k.poin) }}%</td>
        <td class="tengah">{{ k.n_subs }} × {{ '%.2f'|format(k.poin) }}% = <b>{{ '%.2f'|format(k.n_subs * k.poin) }}%</b></td>
      </tr>
      {% endfor %}
      <tr class="total">
        <td colspan="4" style="text-align:right"><b>Total</b></td>
        <td class="tengah"><b>{{ '%.2f'|format(bobot_komponen|sum(attribute='bobot')) }}%</b></td>
      </tr>
    </tbody>
  </table>
  </div>
  <p class="keterangan" style="margin-top:10px">Dijumlah per Sub-CPMK (karena sebagian Sub-CPMK diukur lebih dari satu komponen):</p>
  <div class="gulir">
  <table class="grid">
    <thead><tr><th>Sub-CPMK</th><th class="tengah">Total Poin</th><th>Rincian</th></tr></thead>
    <tbody>
      {% for s in peta.subs %}
      {% set kontribusi = bobot_sub_rincian.get(s.kode) %}
      {% if kontribusi %}
      <tr>
        <td>{{ s.kode }}</td>
        <td class="tengah"><b>{{ '%.2f'|format(kontribusi|sum(attribute='poin')) }}</b></td>
        <td>{% for c in kontribusi %}{{ c.nama }} {{ '%.2f'|format(c.poin) }}{{ ' + ' if not loop.last }}{% endfor %}</td>
      </tr>
      {% endif %}
      {% endfor %}
      <tr class="total">
        <td style="text-align:right"><b>Total</b></td>
        <td class="tengah"><b>{{ '%.2f'|format(bobot_komponen|sum(attribute='bobot')) }}</b></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  </div>
  {% endif %}

  {% if hasil %}
  <h2 class="bagian">HASIL KETERCAPAIAN SUB-CPMK <span style="font-weight:normal;font-style:italic;color:var(--grey)">(ambang {{ ambang|round(0)|int }})</span></h2>
  <div class="gulir">
  <table class="grid">
    <thead><tr><th>Sub-CPMK</th><th class="tengah">Skor</th><th class="tengah">Maks</th><th class="tengah">Status</th></tr></thead>
    <tbody>
      {% for s in peta.subs %}
      {% set info = hasil.sub.get(s.kode) %}
      <tr>
        <td><span class="kode-hover" title="{{ s.uraian }}">{{ s.kode }}</span></td>
        <td class="tengah">{% if info and info.rata is not none %}<b>{{ '%.1f'|format(info.rata) }}</b>{% else %}—{% endif %}</td>
        <td class="tengah">100</td>
        <td class="tengah">
          {% if not info or info.rata is none %}<span class="stamp stamp-draft">BELUM TERUKUR</span>
          {% elif info.rata >= ambang %}<span class="stamp stamp-ok">TERCAPAI</span>
          {% else %}<span class="stamp stamp-no">DI BAWAH AMBANG</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>

  <h2 class="bagian">HASIL KETERCAPAIAN MK <span style="font-weight:normal;font-style:italic;color:var(--grey)">(ambang {{ ambang|round(0)|int }})</span></h2>
  <div class="gulir">
  <table class="grid">
    <thead><tr><th>CPMK</th><th class="tengah">Skor</th><th class="tengah">Sub Ternilai</th><th class="tengah">% Ternilai</th><th>CPL Didukung</th></tr></thead>
    <tbody>
      {% for kode_c, v in hasil.cpmk.items() %}
      {% set cm = peta.cpmks|selectattr('kode', 'equalto', kode_c)|first %}
      <tr>
        <td><span class="kode-hover" title="{{ cm.desk if cm else '' }}">{{ kode_c }}</span></td>
        <td class="tengah">{% if v.skor is not none %}<b>{{ '%.2f'|format(v.skor) }}</b>{% else %}—{% endif %}</td>
        <td class="tengah">{{ v.n_ternilai }}/{{ v.n_sub }}</td>
        <td class="tengah">{{ '%.0f'|format(100 * v.n_ternilai / v.n_sub) ~ '%' if v.n_sub else '—' }}</td>
        <td>{{ v.cpl|join(', ') }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  <div class="gulir" style="margin-top:10px">
  <table class="grid">
    <thead><tr><th>CPL</th><th class="tengah">Skor</th><th class="tengah">% CPMK Ternilai</th><th class="tengah">Status</th></tr></thead>
    <tbody>
      {% for kode_c, v in hasil.cpl.items() %}
      {% set cp = peta.cpls|selectattr('kode', 'equalto', kode_c)|first %}
      <tr>
        <td><span class="kode-hover" title="{{ cp.desk if cp else '' }}">{{ kode_c }}</span></td>
        <td class="tengah">{% if v.skor is not none %}<b>{{ '%.2f'|format(v.skor) }}</b>{% else %}—{% endif %}</td>
        <td class="tengah">{{ '%.0f'|format(100 * v.n_cpmk_ternilai / v.n_cpmk) ~ '%' if v.n_cpmk else '—' }}</td>
        <td class="tengah">
          {% if v.skor is none %}<span class="stamp stamp-draft">BELUM TERUKUR</span>
          {% elif v.skor >= ambang %}<span class="stamp stamp-ok">TERCAPAI</span>
          {% else %}<span class="stamp stamp-no">DI BAWAH AMBANG</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% endif %}
  </details>
  {% endif %}

  {% if ada_kelas %}
  <script>
    (function () {
      var pilih = document.getElementById('filter-kelas');
      var info = document.getElementById('filter-kelas-info');
      var baris = document.querySelectorAll('table.grid tbody tr[data-kelas]');

      function perbarui() {
        var v = pilih.value, n = 0, total = 0;
        baris.forEach(function (tr) {
          var kelas = tr.dataset.kelas;
          if (kelas === '__total__') {
            // baris rata-rata/% lulus: dihitung dari seluruh MK, cuma masuk akal saat "Semua"
            tr.style.display = v === '' ? '' : 'none';
            return;
          }
          total++;
          var tampil = v === '' || kelas === v;
          tr.style.display = tampil ? '' : 'none';
          if (tampil) n++;
        });
        info.textContent = v === '' ? '' : n + ' dari ' + total + ' mahasiswa ditampilkan';
      }

      pilih.addEventListener('change', perbarui);
      perbarui();
    })();
  </script>
  {% endif %}
{% endblock %}