{% extends "base.html" %}

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

{% block content %}
{% include "partials/page_header.html" with eyebrow="Pencarian" heading="Cari Apa Saja" subheading="Telusuri tulisan dan proyek dalam satu tempat." %}

<section class="mx-auto max-w-4xl px-5 py-16 sm:px-8">
  <form method="get" class="reveal flex gap-2">
    <input type="search" name="q" value="{{ query }}" autofocus placeholder="Ketik kata kunci..."
           class="w-full rounded-full border border-white/10 bg-white/5 px-5 py-3.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-primary btn-shine shrink-0">Cari</button>
  </form>

  {% if query %}
    <p class="reveal mt-6 text-sm text-neutral-500">
      {{ total }} hasil untuk <span class="font-semibold text-gold-400">"{{ query }}"</span>
    </p>

    {% if posts %}
      <h2 class="reveal mt-10 font-display text-lg font-extrabold text-neutral-50">Tulisan</h2>
      <div class="mt-4 space-y-3">
        {% for post in posts %}
          <a href="{{ post.get_absolute_url }}" class="reveal card spotlight block p-5">
            <h3 class="font-display text-base font-bold text-neutral-50">{{ post.title }}</h3>
            <p class="mt-1.5 line-clamp-2 text-sm text-neutral-500">{{ post.excerpt }}</p>
            <p class="mt-2 text-xs text-neutral-600">{{ post.published_at|date:"d M Y" }} · {{ post.reading_time }} mnt baca</p>
          </a>
        {% endfor %}
      </div>
    {% endif %}

    {% if projects %}
      <h2 class="reveal mt-10 font-display text-lg font-extrabold text-neutral-50">Proyek</h2>
      <div class="mt-4 space-y-3">
        {% for p in projects %}
          <a href="{{ p.get_absolute_url }}" class="reveal card spotlight block p-5">
            <h3 class="font-display text-base font-bold text-neutral-50">{{ p.title }}</h3>
            <p class="mt-1.5 line-clamp-2 text-sm text-neutral-500">{{ p.short_description }}</p>
          </a>
        {% endfor %}
      </div>
    {% endif %}

    {% if not posts and not projects %}
      <div class="reveal mt-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 hasil</p>
        <p class="mt-1.5 text-sm text-neutral-500">Coba kata kunci lain yang lebih umum.</p>
      </div>
    {% endif %}
  {% endif %}
</section>
{% endblock %}