{% extends "dashboard/base.html" %}
{% load humanize %}

{% block content %}

<div class="reveal mb-5 flex flex-wrap gap-2">
  <a href="{% url 'dashboard:comment_list' %}" class="chip {% if not active_state %}chip-active{% endif %}">Semua</a>
  <a href="?state=pending" class="chip {% if active_state == 'pending' %}chip-active{% endif %}">
    Pending {% if pending_count %}<span class="opacity-70">{{ pending_count }}</span>{% endif %}
  </a>
  <a href="?state=approved" class="chip {% if active_state == 'approved' %}chip-active{% endif %}">Disetujui</a>
</div>

{% if comments %}
  <div class="space-y-3">
    {% for c in comments %}
      <div class="reveal card p-5" data-delay="{{ forloop.counter0 }}0">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500/25 to-gold-400/15 font-display text-sm font-bold text-brand-400">{{ c.initial }}</span>

          <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <p class="text-sm font-bold text-neutral-100">{{ c.name }}</p>
              <span class="rounded-full px-2.5 py-0.5 text-[0.65rem] font-bold uppercase {% if c.is_approved %}bg-emerald-500/12 text-emerald-400{% else %}bg-amber-500/12 text-amber-400{% endif %}">
                {% if c.is_approved %}Tampil{% else %}Pending{% endif %}
              </span>
              {% if c.parent %}<span class="chip !py-0.5">Balasan</span>{% endif %}
            </div>

            <p class="mt-0.5 text-xs text-neutral-600">
              {{ c.email }} <span class="text-neutral-700">·</span> {{ c.created_at|naturaltime }}
            </p>

            <p class="mt-2.5 text-sm leading-relaxed text-neutral-400">{{ c.body|linebreaksbr }}</p>

            <a href="{{ c.post.get_absolute_url }}#comments" target="_blank"
               class="mt-2.5 inline-block text-xs font-semibold text-brand-400 hover:text-gold-400">
              di "{{ c.post.title|truncatechars:52 }}" →
            </a>
          </div>

          <div class="flex shrink-0 gap-2">
            <form method="post" action="{% url 'dashboard:comment_approve' c.pk %}">
              {% csrf_token %}
              <button class="btn {% if c.is_approved %}btn-ghost{% else %}btn-primary{% endif %} !py-2 !px-4 !text-xs">
                {% if c.is_approved %}Sembunyikan{% else %}Setujui{% endif %}
              </button>
            </form>
            <form method="post" action="{% url 'dashboard:comment_delete' c.pk %}" data-confirm="Hapus komentar dari {{ c.name }}?">
              {% csrf_token %}
              <button class="btn btn-ghost !py-2 !px-4 !text-xs !text-red-400">Hapus</button>
            </form>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  {% include "dashboard/partials/pagination.html" %}
{% else %}
  <div class="reveal card p-12 text-center">
    <p class="font-display text-5xl">💬</p>
    <p class="mt-4 font-display text-lg font-bold text-neutral-300">Tidak ada komentar</p>
    <p class="mt-1.5 text-sm text-neutral-500">Komentar dari pengunjung akan muncul di sini untuk kamu moderasi.</p>
  </div>
{% endif %}

{% endblock %}