{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Pages</h2>
<div class="space-y-3">
  {% for page in pages.items %}
  <div class="bg-slate-50 rounded-xl p-4">
    <div class="flex items-center justify-between flex-wrap gap-2">
      <div>
        <p class="text-xs text-slate-400">{{ page.penulis_halaman.nama }} · {{ page.tanggaldibuat.strftime('%Y-%m-%d') }}</p>
        <p class="font-medium text-slate-800 mt-0.5">{{ page.judul }}</p>
        <p class="text-sm text-slate-500 mt-1">{{ page.isi|truncate(500)|striptags }}</p>
      </div>
    </div>
    <div class="mt-3 flex gap-2">
      <a href="{{ url_for('admin.ubahhalaman', idhalaman=page.id) }}" class="btn bg-amber-500 text-white text-xs px-3 py-1.5 hover:bg-amber-600">Edit</a>
          <a href="{{ url_for('admin.hapushalaman', idhalaman=page.id) }}" class="btn-danger text-xs px-3 py-1.5" data-confirm="Are you sure you want to delete this?">Delete</a>
    </div>
  </div>
  {% endfor %}
</div>

<nav class="flex items-center justify-between mt-5 text-sm" aria-label="pagination">
  <div>{% if pages.has_prev %}<a href="{{ url_for('admin.halaman', halaman=pages.prev_num) }}" class="btn-outline text-sm">&larr; Previous</a>{% endif %}</div>
  <div class="flex gap-1">
    {% for page_num in pages.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
      {% if page_num %}
        {% if pages.page == page_num %}<span class="px-3 py-1.5 rounded-lg bg-brand-600 text-white">{{ page_num }}</span>
        {% else %}<a href="{{ url_for('admin.halaman', halaman=page_num) }}" class="px-3 py-1.5 rounded-lg bg-slate-100 text-slate-600 hover:bg-slate-200">{{ page_num }}</a>{% endif %}
      {% else %}<span class="px-2 text-slate-400">&hellip;</span>{% endif %}
    {% endfor %}
  </div>
  <div>{% if pages.has_next %}<a href="{{ url_for('admin.halaman', halaman=pages.next_num) }}" class="btn-outline text-sm">Next &rarr;</a>{% endif %}</div>
</nav>

<a href="{{ url_for('admin.halamanbaru') }}" class="btn-primary mt-4"><i class="fas fa-plus"></i> Add Page</a>
{% endblock content %}