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

{% block header_actions %}
  <a href="{% url 'dashboard:post_create' %}" class="btn btn-primary btn-shine !py-2.5 !px-5 !text-xs">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
    <span class="hidden sm:inline">Tulis</span>
  </a>
{% endblock %}

{% block content %}

<div class="reveal mb-5 flex flex-wrap items-center gap-2">
  <form method="get" class="flex flex-1 gap-2">
    <input type="search" name="q" value="{{ query }}" placeholder="Cari judul postingan..."
           class="w-full max-w-md rounded-xl border border-white/10 bg-black/40 px-4 py-2.5 text-sm text-neutral-100 placeholder-neutral-500 outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25">
    <button type="submit" class="btn btn-ghost !py-2.5 !px-5 !text-xs">Cari</button>
  </form>

  <div class="flex gap-2">
    <a href="{% url 'dashboard:post_list' %}" class="chip {% if not active_status %}chip-active{% endif %}">Semua</a>
    <a href="?status=published" class="chip {% if active_status == 'published' %}chip-active{% endif %}">Terbit</a>
    <a href="?status=draft" class="chip {% if active_status == 'draft' %}chip-active{% endif %}">Draft</a>
  </div>
</div>

{% if object_list %}
  <div class="space-y-3">
    {% for p in object_list %}
      <div class="reveal card spotlight p-4 sm:p-5" data-delay="{{ forloop.counter0 }}0">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center">

          <div class="h-20 w-full shrink-0 overflow-hidden rounded-xl bg-ink-800 sm:h-16 sm:w-24">
            {% if p.cover %}
              <img src="{{ p.cover.url }}" alt="" class="h-full w-full object-cover">
            {% else %}
              <div class="grid h-full w-full place-items-center bg-gradient-to-br from-brand-500/15 to-gold-400/5">
                <span class="font-display text-lg font-extrabold text-ember">{{ p.title|slice:":2"|upper }}</span>
              </div>
            {% endif %}
          </div>

          <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <span class="rounded-full px-2.5 py-0.5 text-[0.65rem] font-bold uppercase {% if p.status == 'published' %}bg-emerald-500/12 text-emerald-400{% else %}bg-amber-500/12 text-amber-400{% endif %}">{{ p.get_status_display }}</span>
              {% if p.is_pinned %}<span class="rounded-full bg-gold-400/12 px-2.5 py-0.5 text-[0.65rem] font-bold uppercase text-gold-400">Pinned</span>{% endif %}
              {% if p.is_scheduled %}<span class="rounded-full bg-brand-500/12 px-2.5 py-0.5 text-[0.65rem] font-bold uppercase text-brand-400">Terjadwal</span>{% endif %}
              {% if p.category %}<span class="chip !py-0.5">{{ p.category.name }}</span>{% endif %}
            </div>

            <h3 class="mt-2 font-display text-sm font-bold text-neutral-50 sm:text-base">{{ p.title }}</h3>
            <p class="mt-1 text-xs text-neutral-600">
              {{ p.published_at|date:"d M Y H:i"|default:"Belum dijadwalkan" }}
              <span class="text-neutral-700">·</span> {{ p.views_count|intcomma }} dilihat
              <span class="text-neutral-700">·</span> {{ p.likes_count }} suka
              <span class="text-neutral-700">·</span> {{ p.comments.count }} komentar
            </p>
          </div>

          <div class="flex shrink-0 flex-wrap gap-2">
            {% if p.status == 'published' %}
              <a href="{{ p.get_absolute_url }}" target="_blank" class="btn btn-ghost !py-2 !px-3.5 !text-xs">Lihat</a>
            {% endif %}
            <form method="post" action="{% url 'dashboard:post_toggle_status' p.pk %}">
              {% csrf_token %}
              <button class="btn btn-ghost !py-2 !px-3.5 !text-xs">{% if p.status == 'published' %}Jadikan Draft{% else %}Terbitkan{% endif %}</button>
            </form>
            <a href="{% url 'dashboard:post_update' p.pk %}" class="btn btn-primary !py-2 !px-4 !text-xs">Edit</a>
            <a href="{% url 'dashboard:post_delete' p.pk %}" class="btn btn-ghost !py-2 !px-3.5 !text-xs !text-red-400">Hapus</a>
          </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">Belum ada postingan</p>
    <p class="mt-1.5 text-sm text-neutral-500">Mulai bagikan pemikiran kamu ke dunia.</p>
    <a href="{% url 'dashboard:post_create' %}" class="btn btn-primary btn-shine mt-6">Tulis Postingan Pertama</a>
  </div>
{% endif %}

{% endblock %}