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

  <div class="mb-6">
    <h1 class="text-2xl font-bold text-slate-800">Artikel berdasarkan {{ label }}
      <span class="text-brand-600">"{{ single_kategori.nama }}"</span>
    </h1>
  </div>

  <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', berita=post.kategori.slug, idartikel=post.slug) }}" class="sm:w-56 shrink-0">
        <div class="aspect-[16/9] 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="text-xs text-slate-400 mb-1">oleh {{ post.penulis.nama }} · {{ post.tanggaldibuat.strftime('%d %b %Y') }}</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|truncate(255)|striptags }}</p>
      </div>
    </article>
    {% endfor %}
  </div>

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

{% endblock content %}