{% extends "admin/layout.html" %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h2 class="text-xl font-bold text-slate-800">Gallery</h2>
  <a href="{{ url_for('admin.tambahgaleri') }}" class="btn-primary"><i class="fas fa-plus"></i> Add Photo</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="Are you sure you want to delete this photo?">Delete</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">« Previous</a>
  {% endif %}
  <span class="px-3 py-1.5 text-slate-500">Page {{ daftar.page }} of {{ 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">Next »</a>
  {% endif %}
</div>
{% else %}
<div class="text-center py-16 text-slate-400">
  <i class="fas fa-images fa-3x mb-3"></i>
  <p>No photos in gallery yet. Click "Add Photo" to start.</p>
</div>
{% endif %}
{% endblock content %}