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

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

<header class="halaman-kepala">
  <div>
    <p class="eyebrow">Kalibrasi skala</p>
    <h1>{{ gbr.judul }}</h1>
    <p class="hero-teks kecil">Tarik garis tepat di atas skala bar yang tercetak pada foto,
      lalu isi panjang bar itu dalam µm. Angka ini yang dipakai penampil untuk menghitung
      skala bar dinamis — tidak ada tebakan.</p>
  </div>
</header>

<div class="kartu-panel">
  <p class="bantuan">Status sekarang: <strong>{{ label }}</strong></p>

  <div class="panggung-kalibrasi" data-panggung
       data-lebar="{{ gbr.lebar_px or 0 }}" data-tinggi="{{ gbr.tinggi_px or 0 }}">
    <div class="kalibrasi-isi" data-isi>
      <img src="{{ url_for('foto', nama=(gbr.file_gambar or '')) }}"
           alt="Preparat {{ gbr.judul }}" data-foto draggable="false">
      <div class="garis-kalibrasi" data-garis hidden></div>
    </div>
    <div class="kalibrasi-kontrol" role="group" aria-label="Kontrol perbesaran kalibrasi">
      <button type="button" class="kontrol" data-z="masuk" aria-label="Perbesar">+</button>
      <button type="button" class="kontrol" data-z="keluar" aria-label="Perkecil">−</button>
      <button type="button" class="kontrol kontrol-teks" data-z="pas">Pas</button>
      <span class="kalibrasi-zoom" data-zoom-teks>100%</span>
    </div>
  </div>
  <p class="bantuan" data-info-garis>Perbesar dulu (roda/＋) supaya garis tepat di atas bar,
    lalu klik-tahan dan geser. Geser sambil menahan <kbd>Shift</kbd> untuk memindah gambar.</p>

  <form method="post" action="{{ url_for('admin_kalibrasi', gid=gbr.id) }}" class="form" data-form-kalibrasi>
      {{ csrf_input() }}
    <input type="hidden" name="skala_bar_px" value="{{ gbr.skala_bar_px or '' }}" data-f-px>
    <div class="baris-bidang">
      <div class="bidang">
        <label for="skala_bar_um">Panjang skala bar di foto (µm)</label>
        <input id="skala_bar_um" name="skala_bar_um" type="number" min="1" max="100000" step="1"
               value="{{ gbr.skala_bar_um or 100 }}" required>
      </div>
      <div class="bidang">
        <label>Panjang garis terukur</label>
        <input type="text" value="{{ (gbr.skala_bar_px ~ ' px') if gbr.skala_bar_px else 'belum digaris' }}"
               data-tampil-px readonly>
      </div>
    </div>
    <p class="bantuan" data-hasil>
      {% if gbr.um_per_px %}
        Skala tersimpan: {{ '%.2f'|format(gbr.um_per_px) }} µm/px
        {% if saran_um %}· bar disarankan {{ saran_um }} µm{% endif %}
      {% else %}
        Belum dikalibrasi: penampil akan menampilkan foto tanpa skala bar.
      {% endif %}
    </p>
    <button class="tombol tombol-utama lebar" type="submit">Simpan kalibrasi</button>
  </form>

  <form method="post" action="{{ url_for('admin_kalibrasi', gid=gbr.id) }}" class="form">
      {{ csrf_input() }}
    <input type="hidden" name="aksi" value="hapus">
    <button class="tombol tombol-garis lebar" type="submit">Hapus kalibrasi (kembali tanpa skala)</button>
  </form>
</div>
{% endblock %}

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