{% extends "base.html" %}

{% block title %}Blog — {{ profile.full_name }}{% endblock %}

{% block content %}
{% include "partials/page_header.html" with eyebrow="Blog" heading="Tulisan & Update" subheading="Catatan, tutorial, dan pemikiran acak yang saya bagikan sesuka hati." %}

<section class="mx-auto max-w-7xl px-5 py-16 sm:px-8">
  <div class="grid gap-12 lg:grid-cols-[1fr_290px]">

    <div>
      <!-- Filter -->
      <div class="reveal mb-8 space-y-4">
        <form method="get" class="flex gap-2">
          {% if active_category %}<input type="hidden" name="category" value="{{ active_category }}">{% endif %}
          <input type="search" name="q" value="{{ query }}" placeholder="Cari tulisan..."
                 class="w-full rounded-full border border-white/10 bg-white/5 px-5 py-3 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-primary shrink-0 !px-6">Cari</button>
        </form>

        <div class="flex flex-wrap gap-2">
          <a href="{% url 'blog:list' %}" class="chip {% if not active_category and not active_type %}chip-active{% endif %}">Semua</a>
          <a href="?type=article" class="chip {% if active_type == 'article' %}chip-active{% endif %}">Artikel</a>
          <a href="?type=update" class="chip {% if active_type == 'update' %}chip-active{% endif %}">Update</a>
          {% for c in categories %}
            <a href="?category={{ c.slug }}" class="chip {% if active_category == c.slug %}chip-active{% endif %}">{{ c.name }} <span class="opacity-60">{{ c.n }}</span></a>
          {% endfor %}
        </div>
      </div>

      {% if posts %}
        <div class="grid gap-6 sm:grid-cols-2">
          {% for post in posts %}
            {% include "blog/partials/post_card.html" with post=post delay=forloop.counter0 %}
          {% endfor %}
        </div>
        {% include "partials/pagination.html" %}
      {% else %}
        <div class="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 tulisan</p>
          <p class="mt-1.5 text-sm text-neutral-500">
            {% if query or active_category or active_type %}Coba ubah filter atau kata kunci.{% else %}Postingan yang kamu tulis lewat panel akan muncul di sini.{% endif %}
          </p>
        </div>
      {% endif %}
    </div>

    <!-- Sidebar -->
    <aside class="space-y-5 lg:sticky lg:top-[calc(var(--nav-h)+1.5rem)] lg:self-start">
      {% if popular %}
        <div class="reveal reveal-right card p-5">
          <p class="text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Paling Populer</p>
          <ol class="mt-4 space-y-3.5">
            {% for p in popular %}
              <li class="flex gap-3">
                <span class="font-display text-lg font-extrabold text-white/12">{{ forloop.counter }}</span>
                <a href="{{ p.get_absolute_url }}" class="text-sm font-medium leading-snug text-neutral-300 transition hover:text-gold-400">{{ p.title }}</a>
              </li>
            {% endfor %}
          </ol>
        </div>
      {% endif %}

      {% if tags %}
        <div class="reveal reveal-right card p-5" data-delay="100">
          <p class="text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Tag</p>
          <div class="mt-4 flex flex-wrap gap-1.5">
            {% for t in tags %}
              <a href="?tag={{ t.slug }}" class="chip {% if active_tag == t.slug %}chip-active{% endif %}">#{{ t.name }}</a>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <div class="reveal reveal-right card card-glow p-5" data-delay="180">
        <p class="font-display text-sm font-bold text-neutral-50">Ikuti lewat RSS</p>
        <p class="mt-1.5 text-xs leading-relaxed text-neutral-500">Dapatkan tulisan baru langsung di reader kamu.</p>
        <a href="{% url 'rss_feed' %}" class="btn btn-ghost mt-4 w-full !py-2.5 !text-xs">Buka RSS Feed</a>
      </div>
    </aside>
  </div>
</section>
{% endblock %}