{% extends "admin/layout.html" %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h2 class="text-xl font-bold text-slate-800">Galeri</h2>
  <a href="{{ url_for('admin.tambahgaleri') }}" class="btn-primary"><i class="fas fa-plus"></i> Tambah Foto</a>
</div>

{% if daftar.items %}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
  {% for g in daftar.items %}
  <div class="bg-white rounded-xl shadow-card overflow-hidden">
    <div class="h-32 bg-slate-100 overflow-hidden">
      <img src="{{ url_for('static', filename='upload/galeri/' + g.gambar) }}" alt="{{ g.judul }}" class="w-full h-full object-cover">
    </div>
    <div class="p-3">
      <p class="text-sm font-semibold text-slate-700 line-clamp-1">{{ g.judul }}</p>
      <p class="text-xs text-slate-400 mt-0.5">{{ g.tanggaldibuat.strftime('%d-%m-%Y') }}</p>
      <div class="flex items-center gap-2 mt-2">
        <a href="{{ url_for('admin.ubahgaleri', idgaleri=g.id) }}" class="btn bg-amber-500 text-white text-xs px-2.5 py-1 hover:bg-amber-600">Edit</a>
        <a href="{{ url_for('admin.hapusgaleri', idgaleri=g.id) }}" class="btn-danger text-xs px-2.5 py-1" data-confirm="Anda yakin ingin menghapus foto ini?">Hapus</a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<div class="mt-6 flex justify-center gap-2 text-sm">
  {% if daftar.has_prev %}
  <a href="{{ url_for('admin.galeri', halaman=daftar.prev_num) }}" class="px-3 py-1.5 rounded-lg bg-white shadow-card text-brand-600 hover:bg-brand-50">« Sebelumnya</a>
  {% endif %}
  <span class="px-3 py-1.5 text-slate-500">Halaman {{ daftar.page }} dari {{ daftar.pages }}</span>
  {% if daftar.has_next %}
  <a href="{{ url_for('admin.galeri', halaman=daftar.next_num) }}" class="px-3 py-1.5 rounded-lg bg-white shadow-card text-brand-600 hover:bg-brand-50">Berikutnya »</a>
  {% endif %}
</div>
{% else %}
<div class="text-center py-16 text-slate-400">
  <i class="fas fa-images fa-3x mb-3"></i>
  <p>Belum ada foto di galeri. Klik "Tambah Foto" untuk mulai.</p>
</div>
{% endif %}
{% endblock content %}