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

{% block content %}

<div class="reveal mb-5 flex flex-wrap gap-2">
  <a href="{% url 'dashboard:inbox' %}" class="chip {% if not active_state %}chip-active{% endif %}">Semua</a>
  <a href="?state=unread" class="chip {% if active_state == 'unread' %}chip-active{% endif %}">
    Belum Dibaca {% if unread_count %}<span class="opacity-70">{{ unread_count }}</span>{% endif %}
  </a>
  <a href="?state=starred" class="chip {% if active_state == 'starred' %}chip-active{% endif %}">Penting</a>
</div>

{% if items %}
  <div class="space-y-2.5">
    {% for m in items %}
      <div class="reveal card p-4 sm:p-5 {% if not m.is_read %}border-brand-500/25{% endif %}" data-delay="{{ forloop.counter0 }}0">
        <div class="flex items-start gap-4">
          <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">{{ m.initial }}</span>

          <a href="{% url 'dashboard:message_detail' m.pk %}" class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <p class="text-sm font-bold {% if not m.is_read %}text-neutral-50{% else %}text-neutral-300{% endif %}">{{ m.name }}</p>
              {% if not m.is_read %}<span class="h-2 w-2 rounded-full bg-brand-500"></span>{% endif %}
              {% if m.is_starred %}<span class="text-gold-400">★</span>{% endif %}
            </div>
            <p class="mt-0.5 truncate text-xs text-neutral-600">{{ m.email }} <span class="text-neutral-700">·</span> {{ m.created_at|naturaltime }}</p>
            <p class="mt-1.5 text-sm font-medium text-neutral-300">{{ m.subject|default:"(tanpa subjek)" }}</p>
            <p class="mt-1 line-clamp-2 text-xs leading-relaxed text-neutral-500">{{ m.message }}</p>
          </a>

          <div class="flex shrink-0 flex-col gap-2">
            <form method="post" action="{% url 'dashboard:message_star' m.pk %}">
              {% csrf_token %}
              <button title="Tandai penting" class="grid h-9 w-9 place-items-center rounded-lg transition hover:bg-white/5 {% if m.is_starred %}text-gold-400{% else %}text-neutral-600 hover:text-gold-400{% endif %}">★</button>
            </form>
            <form method="post" action="{% url 'dashboard:message_delete' m.pk %}" data-confirm="Hapus pesan dari {{ m.name }}?">
              {% csrf_token %}
              <button title="Hapus" class="grid h-9 w-9 place-items-center rounded-lg text-neutral-600 transition hover:bg-red-500/10 hover:text-red-400">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
              </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">Kotak masuk kosong</p>
    <p class="mt-1.5 text-sm text-neutral-500">Pesan dari form kontak akan masuk ke sini.</p>
  </div>
{% endif %}

{% endblock %}