{% extends "base.html" %}
{% block judul %}Atlas Histo — Jelajah preparat{% endblock %}

{% block isi %}
<section class="hero">
  <p class="eyebrow">Nuraziz Lab · Histologi</p>
  <h1>Atlas jaringan,<br><em>satu titik satu struktur.</em></h1>
  <p class="hero-teks">Koleksi preparat mikroskopis untuk kuliah dan praktikum — foto resolusi
    penuh, anotasi bertitik, dan catatan struktur di setiap preparat.</p>
  <dl class="statistik">
    <div><dt>Preparat</dt><dd>{{ total }}</dd></div>
    <div><dt>Kategori</dt><dd>{{ kategori_semua|length }}</dd></div>
    <div><dt>Anotasi</dt><dd>{{ total_anotasi }}</dd></div>
  </dl>
</section>

<section class="alat" aria-label="Cari dan saring">
  <form class="cari" action="{{ url_for('index') }}" method="get" role="search">
      {{ csrf_input() }}
    <svg viewBox="0 0 24 24" aria-hidden="true" class="cari-ikon"><path d="M10.5 3a7.5 7.5 0 1 0 4.55 13.46l4.24 4.24 1.41-1.41-4.24-4.24A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z"/></svg>
    <label class="sr" for="q">Cari preparat</label>
    <input id="q" name="q" type="search" value="{{ q }}" placeholder="Cari preparat atau struktur…" autocomplete="off">
    {% if kategori_aktif %}<input type="hidden" name="kategori" value="{{ kategori_aktif }}">{% endif %}
    <button type="submit" class="tombol tombol-utama">Cari</button>
  </form>

  {% if kategori_semua %}
    <div class="cip-wrap">
      <a class="cip{% if not kategori_aktif %} aktif{% endif %}"
         href="{{ url_for('index', q=q) if q else url_for('index') }}">Semua</a>
      {% for k in kategori_semua %}
        <a class="cip{% if kategori_aktif == k %} aktif{% endif %}"
           href="{{ url_for('index', kategori=k, q=q) }}">{{ k }}</a>
      {% endfor %}
    </div>
  {% endif %}
</section>

<section aria-labelledby="judul-daftar">
  <div class="bagian-kepala">
    <h2 id="judul-daftar">
      {% if q %}Hasil “{{ q }}”{% elif kategori_aktif %}{{ kategori_aktif }}{% else %}Semua preparat{% endif %}
    </h2>
    <span class="hitung">{{ gambar|length }} preparat</span>
  </div>

  {% if gambar %}
    <div class="kisi">
      {% for gbr in gambar %}
        <a class="kartu" href="{{ url_for('preparat', gid=gbr.id) }}">
          <div class="kartu-foto">
            {% if gbr.file_gambar %}
              <img src="{{ url_for('foto', nama=(gbr.file_proxy or gbr.file_gambar)) }}"
                   alt="Preparat {{ gbr.judul }}" loading="lazy" decoding="async">
            {% else %}
              <span class="foto-kosong" aria-hidden="true">AH</span>
            {% endif %}
            {% if hitung.get(gbr.id) %}
              <span class="lencana">{{ hitung[gbr.id] }} anotasi</span>
            {% endif %}
          </div>
          <div class="kartu-isi">
            <h3>{{ gbr.judul }}</h3>
            {% if gbr.deskripsi %}<p>{{ gbr.deskripsi|truncate(105, true, '…') }}</p>{% endif %}
            <div class="kartu-kaki">
              {% if gbr.kategori %}<span class="tag">{{ gbr.kategori }}</span>{% endif %}
              <time>{{ gbr.created_at.strftime('%d %b %Y') if gbr.created_at else '' }}</time>
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% else %}
    <div class="kosong">
      <span class="kosong-lambang" aria-hidden="true">
        <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="17" fill="none" stroke="currentColor" stroke-width="2" opacity=".5"/><circle cx="24" cy="24" r="8" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="33" cy="15" r="2.6" fill="currentColor"/></svg>
      </span>
      <h3>{% if q or kategori_aktif %}Tidak ada preparat yang cocok{% else %}Atlas masih kosong{% endif %}</h3>
      <p>{% if q or kategori_aktif %}Coba kata kunci lain atau kembali ke semua kategori.{% else %}Unggah preparat pertama lewat panel kelola — foto, kategori, lalu anotasi strukturnya.{% endif %}</p>
      {% if q or kategori_aktif %}
        <a class="tombol tombol-garis" href="{{ url_for('index') }}">Tampilkan semua</a>
      {% elif admin_aktif() %}
        <a class="tombol tombol-utama" href="{{ url_for('admin') }}">Buka panel kelola</a>
      {% endif %}
    </div>
  {% endif %}
</section>
{% endblock %}