{% extends "main/main.html" %}
{% block content %}

  <h2 class="text-2xl font-bold text-slate-800 mb-5">{{ label }}</h2>
  <div class="space-y-6">
    {% for post in posts.items %}
    <article class="card-soft p-4 sm:p-5 flex flex-col sm:flex-row gap-4 hover:-translate-y-0.5 transition">
      <a href="{{ url_for('main.artikel', idartikel=post.slug) }}" class="sm:w-56 shrink-0">
        <div class="aspect-video sm:aspect-square overflow-hidden rounded-xl bg-slate-100">
          <img src="{{ url_for('static', filename='upload/img_thumbnail/' + post.gambar) }}" alt="{{ post.judul }}"
               class="h-full w-full object-cover hover:scale-105 transition duration-500">
        </div>
      </a>
      <div class="min-w-0 flex flex-col">
        <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
          <span class="font-semibold text-brand-600">{{ post.kategori.nama }}</span>
          <span>·</span>
          <span>{{ post.penulis.nama }}</span>
          <span>·</span>
          <span>{{ post.tanggaldibuat.strftime('%d %b %Y') }}</span>
        </div>
        <a href="{{ url_for('main.artikel', idartikel=post.slug) }}" class="text-lg font-bold text-slate-800 hover:text-brand-600 transition">{{ post.judul }}</a>
        <p class="mt-2 text-sm text-slate-500 line-clamp-3">{{ post.isi|striptags|truncate(200) }}</p>
      </div>
    </article>
    {% else %}
    <p class="text-sm text-slate-500">No articles in this period yet.</p>
    {% endfor %}
  </div>

  <div class="flex justify-between items-center mt-8">
    {% if posts.has_prev %}
    <a href="{{ url_for('main.arsip', tahun=tahun, bulan=bulan, halaman=posts.prev_num) }}" class="btn-outline text-sm"><i class="fas fa-arrow-left"></i> Previous</a>
    {% else %}
    <span></span>
    {% endif %}
    {% if posts.has_next %}
    <a href="{{ url_for('main.arsip', tahun=tahun, bulan=bulan, halaman=posts.next_num) }}" class="btn-outline text-sm">Next <i class="fas fa-arrow-right"></i></a>
    {% endif %}
  </div>

{% endblock content %}