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

{% block isi %}
<nav class="remah" aria-label="Remah roti">
  <a href="{{ url_for('index') }}">Jelajah</a><span aria-hidden="true">/</span>
  <a href="{{ url_for('admin') }}">Kelola</a><span aria-hidden="true">/</span>
  <span aria-current="page">{{ gbr.judul }}</span>
</nav>

<header class="halaman-kepala">
  <div>
    <p class="eyebrow">Panel kelola</p>
    <h1>{{ gbr.judul }}</h1>
  </div>
  <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('preparat', gid=gbr.id) }}">Lihat sebagai pembaca</a>
</header>

<div class="dua-kolom dua-kolom-bawah">
  <section class="kartu-panel" aria-labelledby="judul-anotasi">
    <div class="panel-kepala">
      <h2 id="judul-anotasi">Anotasi</h2>
      <span class="hitung">{{ anotasi|length }}</span>
    </div>

    <div class="alat-gambar" role="group" aria-label="Jenis anotasi">
      <button type="button" class="pil-alat aktif" data-mode="titik" aria-pressed="true">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></svg>
        Titik
      </button>
      <button type="button" class="pil-alat" data-mode="area" aria-pressed="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8l6-4 9 3-2 9-8 3-5-4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
        Area (poligon)
      </button>
    </div>
    <p class="bantuan" data-petunjuk>Ketuk foto untuk menaruh satu titik, lalu isi labelnya.</p>

    <div class="pilih-titik" data-panggung>
      {% if gbr.file_gambar %}
        <img src="{{ url_for('foto', nama=gbr.file_gambar) }}" alt="Preparat {{ gbr.judul }}" data-foto>
      {% else %}
        <div class="foto-kosong besar" aria-hidden="true">AH</div>
      {% endif %}

      <svg class="lapis-bentuk lapis-gambar" data-lapis viewBox="0 0 100 100"
           preserveAspectRatio="none" aria-hidden="true">
        {% for a in anotasi %}{% if a.poligon %}
          <polygon class="bentuk-lama" points="{{ a.poligon }}"></polygon>
        {% endif %}{% endfor %}
        <polygon class="bentuk-draf" data-draf-poligon hidden></polygon>
        <polyline class="garis-draf" data-draf-garis hidden></polyline>
      </svg>
      <div class="lapis-verteks" data-verteks aria-hidden="true"></div>

      {% for a in anotasi %}
        <span class="pin pin-statis {{ 'pin-area' if a.tipe == 'area' else '' }}"
              style="left:{{ a.px }}%;top:{{ a.py }}%">
          <span class="pin-angka">{{ loop.index }}</span>
        </span>
      {% endfor %}
      <span class="pin pin-baru" data-pin-baru hidden><span class="pin-angka">+</span></span>
    </div>

    <div class="draf-alat" data-draf-alat hidden>
      <button type="button" class="tombol tombol-utama tombol-kecil" data-selesai>Selesai</button>
      <button type="button" class="tombol tombol-garis tombol-kecil" data-undo>Urungkan titik</button>
      <button type="button" class="tombol tombol-garis tombol-kecil" data-batal>Batal</button>
      <span class="draf-info" data-info-area></span>
    </div>

    <form method="post" action="{{ url_for('admin_preparat', gid=gbr.id) }}"
          class="form form-anotasi" data-form-anotasi>
      {{ csrf_input() }}
      <input type="hidden" name="aksi" value="anotasi">
      <input type="hidden" name="tipe" value="titik" data-f-tipe>
      <input type="hidden" name="x_pos" value="50" data-f-x>
      <input type="hidden" name="y_pos" value="50" data-f-y>
      <input type="hidden" name="titik" value="" data-f-titik>
      <div class="bidang">
        <label for="label">Label struktur <span class="wajib">*</span></label>
        <input id="label" name="label" required maxlength="100" placeholder="mis. Glomerulus">
      </div>
      <div class="bidang">
        <label for="keterangan">Keterangan</label>
        <input id="keterangan" name="keterangan" maxlength="255" placeholder="Catatan singkat (opsional)">
      </div>
      <button class="tombol tombol-utama lebar" type="submit" data-simpan disabled>
        Tambah anotasi
      </button>
    </form>

    {% if anotasi %}
      <ul class="daftar-admin daftar-anot">
        {% for a in anotasi %}
          <li>
            <span class="nomor {{ 'nomor-area' if a.tipe == 'area' else '' }}" aria-hidden="true">{{ loop.index }}</span>
            <span class="daftar-teks">
              <strong>{{ a.label }}</strong>
              <small>
                {{ 'Area' if a.tipe == 'area' else 'Titik' }} ·
                {% if a.tipe == 'area' %}{{ a.jumlah_titik }} sudut · {{ a.luas_pct }}% luas{% else %}{{ a.x_pos }}%, {{ a.y_pos }}%{% endif %}
                {% if a.keterangan %} · {{ a.keterangan }}{% endif %}
              </small>
            </span>
            <form method="post" action="{{ url_for('admin_anotasi_hapus', aid=a.id) }}"
                  data-konfirmasi="Hapus anotasi “{{ a.label }}”?">
      {{ csrf_input() }}
              <button class="tombol tombol-hapus tombol-kecil" type="submit">Hapus</button>
            </form>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </section>

  <section class="kartu-panel" aria-labelledby="judul-sunting">
    <h2 id="judul-sunting">Sunting data preparat</h2>
    <form method="post" action="{{ url_for('admin_preparat', gid=gbr.id) }}" enctype="multipart/form-data" class="form">
      {{ csrf_input() }}
      <input type="hidden" name="aksi" value="sunting">
      <div class="bidang">
        <label for="judul">Judul preparat <span class="wajib">*</span></label>
        <input id="judul" name="judul" required maxlength="255" value="{{ gbr.judul }}">
      </div>
      <div class="bidang">
        <label for="kategori">Kategori</label>
        <input id="kategori" name="kategori" maxlength="100" value="{{ gbr.kategori or '' }}" list="daftar-kategori">
        <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="4">{{ gbr.deskripsi or '' }}</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="{{ gbr.perbesaran_total or 40 }}" step="1">
        </div>
        <div class="bidang">
          <label for="objektif">Objektif</label>
          <select id="objektif" name="objektif">
            {% for opt in ['4x', '10x', '40x', '100x'] %}
              <option value="{{ opt }}" {{ 'selected' if (gbr.objektif or '4x') == opt else '' }}>{{ opt }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="bidang">
          <label for="okuler">Okuler</label>
          <input id="okuler" name="okuler" type="number" min="1" max="30"
                 value="{{ gbr.okuler or 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' if gbr.publik else '' }}>
          <span>Bagikan ke semua kelas</span>
        </label>
      </div>
      <div class="bidang">
        <p class="bantuan">Status skala: <strong>{{ label_skala(gbr) }}</strong></p>
        <a class="tombol tombol-garis lebar" href="{{ url_for('admin_kalibrasi', gid=gbr.id) }}">
          Kalibrasi skala bar
        </a>
      </div>
      <div class="bidang">
        <label for="file">Ganti foto (opsional)</label>
        <label class="jatuhkan jatuhkan-kecil" for="file" data-dropzone>
          <input id="file" name="file" type="file" accept="image/png,image/jpeg,image/webp,image/gif">
          <span class="jatuhkan-teks">Pilih foto pengganti</span>
          <span class="jatuhkan-info">Biarkan kosong untuk mempertahankan foto lama.</span>
          <img class="jatuhkan-pratinjau" alt="" hidden>
        </label>
      </div>
      <button class="tombol tombol-utama lebar" type="submit">Simpan perubahan</button>
    </form>
  </section>
</div>
{% endblock %}