{% extends "base.html" %}
{% load civic_tags %}
{% block content %}
{% include "partials/page_hero.html" with eyebrow="ব্লগ" title="ভাবনা, বিশ্লেষণ ও আপডেট" description=meta.description crumbs=meta.crumbs %}
<section class="container-x py-12">
  <form method="get" class="mb-6 flex flex-col gap-3 sm:flex-row">
    <input type="search" name="q" value="{{ query }}" placeholder="লেখা খুঁজুন…" class="flex-1 rounded-full border border-forest/15 bg-white px-5 py-3" aria-label="লেখা খুঁজুন">
    <input type="hidden" name="cat" value="{{ active_cat }}">
    <select name="sort" class="rounded-full border border-forest/15 bg-white px-5 py-3" aria-label="সাজানো">
      <option value="new" {% if sort == 'new' %}selected{% endif %}>নতুন আগে</option>
      <option value="popular" {% if sort == 'popular' %}selected{% endif %}>জনপ্রিয়</option>
    </select>
    <button class="rounded-full bg-forest px-6 py-3 font-semibold text-cream">খুঁজুন</button>
  </form>
  <nav class="mb-6 flex flex-wrap gap-2" aria-label="বিভাগ">
    {% for c in categories %}<a href="?cat={{ c|urlencode }}&sort={{ sort }}&q={{ query|urlencode }}" class="rounded-full border px-4 py-2 text-sm font-semibold {% if c == active_cat %}border-forest bg-forest text-cream{% else %}border-forest/15 text-forest{% endif %}">{{ c }}</a>{% endfor %}
  </nav>
  {% if active_tag %}<p class="mb-6 text-sm text-muted">ট্যাগ: <span class="font-semibold text-forest">#{{ active_tag }}</span> · <a href="?" class="underline">সব দেখুন</a></p>{% endif %}
  <p class="mb-6 text-sm text-muted">{{ posts|length|bn }} টি লেখা ({{ total|bn }} টির মধ্যে)</p>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    {% for p in posts %}
    <article class="card-surface flex flex-col rounded-3xl p-6 transition hover:-translate-y-1">
      <p class="text-xs font-semibold uppercase tracking-wider text-gold-deep">{{ p.category }} · {{ p.readTime|bn }} মিনিট পড়া</p>
      <h2 class="mt-3 font-bold leading-snug text-forest"><a href="{% url 'core:blog-detail' p.slug %}" class="after:absolute after:inset-0">{{ p.title }}</a></h2>
      <p class="mt-3 text-sm text-muted">{{ p.excerpt }}</p>
      <div class="mt-auto flex flex-wrap gap-1.5 pt-5">{% for t in p.tags %}<a href="?tag={{ t|urlencode }}" class="rounded-full bg-forest/5 px-2.5 py-1 text-[0.7rem] text-forest">#{{ t }}</a>{% endfor %}</div>
      <p class="mt-4 text-xs text-muted">{{ p.date|bn_date }} · {{ p.views|bn_num }} বার পঠিত</p>
    </article>
    {% empty %}<p class="text-muted">কোনো লেখা পাওয়া যায়নি।</p>
    {% endfor %}
  </div>
  <div class="mt-12 flex flex-wrap gap-2">{% for t in tags %}<a href="?tag={{ t|urlencode }}" class="text-xs text-muted hover:text-forest">#{{ t }}</a>{% endfor %}</div>
</section>
{% endblock %}