{% extends "main/main.html" %}
{% block content %}
<div class="mb-6">
  <h1 class="text-3xl font-bold text-slate-800">Gallery</h1>
  <p class="text-slate-500 mt-1">Collection of photos and activity documentation.</p>
</div>

{% if foto.items %}
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
  {% for g in foto.items %}
  <a href="{{ url_for('main.detailgaleri', slug=g.slug) }}" class="group block rounded-xl overflow-hidden shadow-card bg-white">
    <div class="h-44 overflow-hidden">
      <img src="{{ url_for('static', filename='upload/galeri/' + g.gambar) }}" alt="{{ g.judul }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
    </div>
    <div class="p-3">
      <p class="text-sm font-semibold text-slate-700 line-clamp-1 group-hover:text-brand-600 transition">{{ g.judul }}</p>
      <p class="text-xs text-slate-400 mt-0.5">{{ g.tanggaldibuat.strftime('%d %B %Y') }}</p>
    </div>
  </a>
  {% endfor %}
</div>

<div class="mt-8 flex justify-center gap-2 text-sm">
  {% if foto.has_prev %}
  <a href="{{ url_for('main.galeri', halaman=foto.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 {{ foto.page }} of {{ foto.pages }}</span>
  {% if foto.has_next %}
  <a href="{{ url_for('main.galeri', halaman=foto.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-20 text-slate-400">
  <i class="fas fa-images fa-3x mb-3"></i>
  <p>No photos published yet.</p>
</div>
{% endif %}
{% endblock content %}