{% extends "admin/layout.html" %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <h2 class="text-xl font-bold text-slate-800">Posts</h2>
  <a href="{{ url_for('admin.artikelbaru') }}" class="btn-primary text-sm"><i class="fas fa-plus"></i> Add Post</a>
</div>
{% if posts.items %}
  <div class="space-y-3">
  {% for post in posts.items %}
    <div class="bg-slate-50 rounded-xl p-4">
      <div class="flex items-center justify-between flex-wrap gap-2">
        <p class="text-xs text-slate-400">{{ post.penulis.nama }} · {{ post.tanggaldibuat.strftime('%d-%B-%Y') }}</p>
        <span class="badge-blue">{{ post.kategori.nama }}</span>
      </div>
      <p class="font-medium text-slate-800 mt-1"><a href="{{ url_for('main.artikel', berita=post.kategori.slug, idartikel=post.slug) }}" class="hover:text-brand-600">{{ post.judul }}</a></p>
      <p class="text-sm text-slate-500 mt-1">{{ post.isi|truncate(500)|striptags }}</p>
      <div class="mt-3 flex flex-wrap gap-2 items-center">
        <a href="{{ url_for('admin.ubahartikel', idartikel=post.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.hapusartikel', idartikel=post.id) }}" class="btn-danger text-xs px-3 py-1.5" data-confirm="Are you sure you want to delete this?">Delete</a>
        <a href="{{ url_for('admin.kirimkepengikut', idartikel=post.id) }}" class="btn bg-sky-500 text-white text-xs px-3 py-1.5 hover:bg-sky-600" data-confirm="Are you sure you want to send this to subscribers?">Send Email</a>
        <div class="flex gap-1">
          {% for t in post.tags %}<span class="badge bg-slate-200 text-slate-600">{{ t.nama }}</span>{% endfor %}
        </div>
        <span class="text-xs text-slate-400 ml-auto">viewed {{ post.dibaca }} · updated {{ post.tanggalupdate.strftime('%d-%B-%Y') }}</span>
      </div>
    </div>
  {% endfor %}
  </div>
{% else %}
  <div class="bg-green-50 text-green-700 rounded-xl px-4 py-3 text-sm">You haven't posted any articles yet.</div>
{% endif %}

<nav class="flex items-center justify-between mt-5 text-sm" aria-label="pagination">
  <div>{% if posts.has_prev %}<a href="{{ url_for('admin.admin_index', halaman=posts.prev_num) }}" class="btn-outline text-sm">&larr; Previous</a>{% endif %}</div>
  <div class="flex gap-1">
    {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
      {% if page_num %}
        {% if posts.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.admin_index', 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 posts.has_next %}<a href="{{ url_for('admin.admin_index', halaman=posts.next_num) }}" class="btn-outline text-sm">Next &rarr;</a>{% endif %}</div>
</nav>
{% endblock content %}