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

{% block isi %}
<header class="halaman-kepala">
  <div>
    <p class="eyebrow">Panel kelola</p>
    <h1>Kelola atlas</h1>
    <p class="hero-teks kecil">Unggah preparat baru, lengkapi keterangan, lalu tambahkan anotasi
      strukturnya di halaman preparat.</p>
  </div>
  <div class="aksi-kepala">
    <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('akun.pengguna') }}">Akun &amp; kelas</a>
  </div>
</header>

{% if not ada_sandi %}
  <p class="catatan">Panel ini terbuka tanpa sandi. Setel <code>HIST_ADMIN_PASS</code> pada
    layanan Flask bila atlas dipakai bersama.</p>
{% endif %}

<div class="dua-kolom">
  <section class="kartu-panel" aria-labelledby="judul-unggah">
    <h2 id="judul-unggah">Unggah preparat</h2>
    <form method="post" action="{{ url_for('admin') }}" enctype="multipart/form-data" class="form">
      {{ csrf_input() }}
      <div class="bidang">
        <label for="judul">Judul preparat <span class="wajib">*</span></label>
        <input id="judul" name="judul" required maxlength="255" placeholder="mis. Ginjal — korteks dan medula">
      </div>
      <div class="bidang">
        <label for="kategori">Kategori</label>
        <input id="kategori" name="kategori" maxlength="100" list="daftar-kategori" placeholder="mis. Sistem urinaria">
        <datalist id="daftar-kategori">
          {% for k in kategori_semua %}<option value="{{ k }}">{% endfor %}
        </datalist>
      </div>
      <div class="bidang">
        <label for="deskripsi">Deskripsi</label>
        <textarea id="deskripsi" name="deskripsi" rows="3" placeholder="Pewarnaan, struktur yang ingin ditonjolkan…"></textarea>
      </div>
      <div class="baris-bidang">
        <div class="bidang">
          <label for="perbesaran_total">Perbesaran total</label>
          <input id="perbesaran_total" name="perbesaran_total" type="number" min="1" max="4000" value="40" step="1">
        </div>
        <div class="bidang">
          <label for="objektif">Objektif</label>
          <select id="objektif" name="objektif">
            <option value="4x" selected>4x</option>
            <option value="10x">10x</option>
            <option value="40x">40x</option>
            <option value="100x">100x</option>
          </select>
        </div>
        <div class="bidang">
          <label for="okuler">Okuler</label>
          <input id="okuler" name="okuler" type="number" min="1" max="30" value="10" step="1">
        </div>
      </div>
      <div class="bidang">
        <label class="pilihan">
          <input type="hidden" name="publik" value="0">
          <input type="checkbox" name="publik" value="1" checked>
          <span>Bagikan ke semua kelas</span>
        </label>
        <small class="bantuan">Tanpa centang: hanya terlihat oleh dosen pemilik dan lewat ujian.</small>
      </div>
      <div class="bidang">
        <label for="file">Foto preparat <span class="wajib">*</span></label>
        <label class="jatuhkan" for="file" data-dropzone>
          <input id="file" name="file" type="file" accept="image/png,image/jpeg,image/webp,image/gif" required>
          <span class="jatuhkan-ikon" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M12 16V4m0 0 4 4m-4-4L8 8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
          </span>
          <span class="jatuhkan-teks"><strong>Pilih foto</strong> atau lepaskan di sini</span>
          <span class="jatuhkan-info">PNG, JPG, WEBP, GIF · maks 25 MB · otomatis dikecilkan ke 8000 px</span>
          <img class="jatuhkan-pratinjau" alt="" hidden>
        </label>
      </div>
      <button class="tombol tombol-utama lebar" type="submit">Simpan preparat</button>
    </form>
  </section>

  <section class="kartu-panel" aria-labelledby="judul-daftar">
    <div class="panel-kepala">
      <h2 id="judul-daftar">Preparat tersimpan</h2>
      <span class="hitung">{{ daftar|length }}</span>
    </div>
    {% if daftar %}
      <ul class="daftar-admin">
        {% for gbr in daftar %}
          <li>
            <span class="daftar-foto">
              {% if gbr.file_gambar %}
                <img src="{{ url_for('foto', nama=(gbr.file_proxy or gbr.file_gambar)) }}" alt="" loading="lazy">
              {% else %}<span class="foto-kosong" aria-hidden="true">AH</span>{% endif %}
            </span>
            <span class="daftar-teks">
              <strong>{{ gbr.judul }}</strong>
              <small>{{ gbr.kategori or 'Tanpa kategori' }} · {{ hitung.get(gbr.id, 0) }} anotasi</small>
              <small class="daftar-skala">{{ label_skala(gbr) }}</small>
            </span>
            <span class="daftar-aksi">
              <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('admin_preparat', gid=gbr.id) }}">Kelola</a>
              <form method="post" action="{{ url_for('admin_hapus', gid=gbr.id) }}" data-konfirmasi="Hapus preparat “{{ gbr.judul }}” beserta anotasinya?">
      {{ csrf_input() }}
                <button class="tombol tombol-hapus tombol-kecil" type="submit">Hapus</button>
              </form>
            </span>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="kosong-kecil">Belum ada preparat. Unggah yang pertama lewat formulir di samping.</p>
    {% endif %}
  </section>
</div>
{% endblock %}