{% extends "admin/layout.html" %}
{% block content %}
<h2 class="text-xl font-bold text-slate-800 mb-4">Komentar</h2>
{% if comments.items %}
  <div class="space-y-3">
  {% for comment in comments.items %}
    <div class="bg-slate-50 rounded-xl p-4">
      <div class="flex items-center justify-between flex-wrap gap-2">
        <div class="flex items-center gap-2">
          <a href="{{ comment.website }}" target="_blank" class="font-semibold text-slate-800 hover:text-brand-600">{{ comment.nama }}</a>
          <span class="text-xs text-slate-400">{{ comment.tanggalkomen|indonesia_time(with_time=true) }}</span>
        </div>
        {% if comment.reply_id %}<span class="badge-blue">Membalas {{ comment.reply.name }}</span>{% endif %}
      </div>
      <p class="text-sm text-slate-500 mt-0.5">{{ comment.surel }}</p>
      <p class="mt-2 font-medium text-slate-700"><a href="{{ url_for('main.artikel', berita=comment.komentar.slug, idartikel=comment.komentar.slug) }}" class="hover:text-brand-600">{{ comment.komentar.judul }}</a></p>
      <p class="text-sm text-slate-600 mt-1">{{ comment.komentar|truncate(500) }}</p>
      <div class="mt-3 flex gap-2">
        {% if comment.publish %}
          <a href="{{ url_for('admin.unpubkomentar', id=comment.id) }}" class="btn bg-amber-500 text-white text-xs px-3 py-1.5 hover:bg-amber-600">Unpublish</a>
        {% else %}
          <a href="{{ url_for('admin.unpubkomentar', id=comment.id) }}" class="btn bg-green-600 text-white text-xs px-3 py-1.5 hover:bg-green-700">Publish</a>
        {% endif %}
        <a href="{{ url_for('admin.hapuskomentar', id=comment.id) }}" class="btn-danger text-xs px-3 py-1.5" data-confirm="Anda yakin ingin menghapus ini?">Hapus</a>
      </div>
    </div>
  {% endfor %}
  </div>
{% else %}
  <div class="bg-green-50 text-green-700 rounded-xl px-4 py-3 text-sm">Belum ada Komentar.</div>
{% endif %}

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