{% extends "base.html" %}
{% block judul %}{{ 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>
  {% if gbr.kategori %}<a href="{{ url_for('index', kategori=gbr.kategori) }}">{{ gbr.kategori }}</a><span aria-hidden="true">/</span>{% endif %}
  <span aria-current="page">{{ gbr.judul }}</span>
</nav>

<article class="preparat">
  <header class="preparat-kepala">
    <div>
      <h1>{{ gbr.judul }}</h1>
      <p class="meta">
        {% if gbr.kategori %}<span class="tag">{{ gbr.kategori }}</span>{% endif %}
        <time>{{ gbr.created_at.strftime('%d %B %Y') if gbr.created_at else '' }}</time>
        <span>{{ anotasi|length }} anotasi</span>
      </p>
    </div>
    <div class="aksi-kepala">
      {% if bisa_tandai %}
        <form method="post" action="{{ url_for('belajar.tandai_form', gid=gbr.id) }}">
          {{ csrf_input() }}
          {% if dipelajari %}<input type="hidden" name="nilai" value="0">{% endif %}
          <button class="tombol {{ 'tombol-garis' if dipelajari else 'tombol-utama' }} tombol-kecil"
                  type="submit">
            {{ 'Batalkan tanda dipelajari' if dipelajari else 'Tandai sudah dipelajari' }}
          </button>
        </form>
      {% endif %}
      {% if admin_aktif() %}
        <a class="tombol tombol-garis tombol-kecil" href="{{ url_for('admin_preparat', gid=gbr.id) }}">Kelola preparat</a>
      {% endif %}
    </div>
  </header>

  {% if gbr.deskripsi %}<p class="preparat-desk">{{ gbr.deskripsi }}</p>{% endif %}

  <figure class="panggung">
    {% if gbr.file_gambar %}
      <div class="penampil" id="penampil"
           data-lebar="{{ gbr.lebar_px or 0 }}" data-tinggi="{{ gbr.tinggi_px or 0 }}"
           data-proxy="{{ url_for('foto', nama=(gbr.file_proxy or gbr.file_gambar)) }}"
           data-penuh="{{ url_for('foto', nama=gbr.file_gambar) }}"
           data-um-per-px="{{ gbr.um_per_px or '' }}">

        <div class="penampil-jendela" data-jendela>
          <div class="penampil-isi" data-isi>
            <img class="penampil-foto" data-foto-penuh src="{{ url_for('foto', nama=(gbr.file_proxy or gbr.file_gambar)) }}"
                 alt="Preparat {{ gbr.judul }}" draggable="false" decoding="async">
            {% if anotasi %}
              <svg class="lapis-bentuk penampil-bentuk" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
                {% for a in anotasi %}{% if a.poligon %}
                  <polygon class="bentuk-area" points="{{ a.poligon }}" data-target="{{ loop.index0 }}"></polygon>
                {% endif %}{% endfor %}
              </svg>
              {% for a in anotasi %}
                <button type="button" class="pin {{ 'pin-area' if a.tipe == 'area' else '' }}"
                        style="left:{{ a.px }}%;top:{{ a.py }}%"
                        data-pin data-target="{{ loop.index0 }}" data-x="{{ a.px }}" data-y="{{ a.py }}"
                        aria-label="Anotasi {{ loop.index }}: {{ a.label }}">
                  <span class="pin-angka">{{ loop.index }}</span>
                  <span class="pin-kartu" role="tooltip">
                    <strong>{{ a.label }}</strong>
                    {% if a.keterangan %}<span>{{ a.keterangan }}</span>{% endif %}
                    {% if a.tipe == 'area' %}<span class="pin-jenis">Area · {{ a.luas_pct }}% luas foto</span>{% endif %}
                  </span>
                </button>
              {% endfor %}
            {% endif %}
          </div>
        </div>

        <div class="penampil-kontrol" role="group" aria-label="Kontrol perbesaran">
          <button type="button" class="kontrol" data-aksi="keluar" title="Perkecil" aria-label="Perkecil">−</button>
          <button type="button" class="kontrol" data-aksi="masuk" title="Perbesar" aria-label="Perbesar">+</button>
          <button type="button" class="kontrol kontrol-teks" data-aksi="pas" title="Pas layar">Pas</button>
          <button type="button" class="kontrol kontrol-teks" data-aksi="penuh" title="Skala 1:1">100%</button>
          {% if anotasi %}
            <button type="button" class="kontrol kontrol-teks" data-aksi="sembunyikan"
                    title="Sembunyikan label anotasi" aria-pressed="false">Uji diri</button>
          {% endif %}
          <a class="kontrol kontrol-teks" href="{{ url_for('foto', nama=gbr.file_gambar) }}"
             target="_blank" rel="noopener" title="Buka foto ukuran penuh">Asli</a>
        </div>

        <div class="penampil-skala" data-skala-bar aria-hidden="true">
          <span class="skala-garis" data-skala-garis></span>
          <span class="skala-teks" data-skala-teks></span>
        </div>
        <p class="penampil-label" id="label-perbesaran" data-label>{{ label_skala(gbr) }}</p>
        <span class="penampil-digital" data-zoom-digital hidden></span>
      </div>
      <figcaption class="panggung-ket">Geser untuk memindah, cubit atau gulir untuk zoom ·
        ketuk titik/area untuk nama struktur.</figcaption>
    {% else %}
      <div class="foto-kosong besar" aria-hidden="true">AH</div>
    {% endif %}
  </figure>

  {% if anotasi %}
    <section class="daftar-anotasi" aria-labelledby="judul-anotasi">
      <h2 id="judul-anotasi">Struktur pada preparat ini</h2>
      <ol>
        {% for a in anotasi %}
          <li>
            <span class="nomor {{ 'nomor-area' if a.tipe == 'area' else '' }}" aria-hidden="true">{{ loop.index }}</span>
            <div>
              <strong>{{ a.label }}</strong>
              <span class="jenis">{{ 'Area' if a.tipe == 'area' else 'Titik' }}{% if a.tipe == 'area' %} · {{ a.jumlah_titik }} sudut · {{ a.luas_pct }}% luas{% endif %}</span>
              {% if a.keterangan %}<p>{{ a.keterangan }}</p>{% endif %}
            </div>
          </li>
        {% endfor %}
      </ol>
    </section>
  {% endif %}
</article>

{% if tetangga %}
  <section class="lain" aria-labelledby="judul-lain">
    <h2 id="judul-lain">Preparat lain</h2>
    <div class="kisi kisi-kecil">
      {% for t in tetangga %}
        <a class="kartu kartu-tipis" href="{{ url_for('preparat', gid=t.id) }}">
          <div class="kartu-isi"><h3>{{ t.judul }}</h3></div>
        </a>
      {% endfor %}
    </div>
  </section>
{% endif %}
{% endblock %}

{% block skrip %}
<script src="{{ url_for('static', filename='penampil-inti.js') }}?v=1"></script>
<script src="{{ url_for('static', filename='penampil.js') }}?v=1"></script>
{% endblock %}