{% extends "madga/blog/base.html" %}
{% block title %}Blog · {{ site.name }}{% endblock %}

{% block content %}
{# Grid layout: 2-col cards with featured image on top. #}
<section class="max-w-5xl mx-auto px-4 sm:px-6 py-10 sm:py-14">
  <header class="mb-8">
    <h1 class="font-heading text-3xl sm:text-4xl font-semibold tracking-tight">
      {% if category %}{{ category.name }}{% elif tag %}#{{ tag.name }}{% else %}Blog{% endif %}
    </h1>
    {% if category %}<p class="mt-2 text-slate-500 dark:text-slate-400">{{ category.description }}</p>{% endif %}
  </header>

  {% if categories %}
  <nav class="flex flex-wrap gap-2 mb-8">
    <a href="/blog/" class="px-3 py-1 rounded-full text-sm border {% if not category and not tag %}border-accent text-accent{% else %}border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-accent hover:text-accent{% endif %}">Todos</a>
    {% for c in categories %}
      <a href="/blog/?category={{ c.slug }}" class="px-3 py-1 rounded-full text-sm border {% if category and category.slug == c.slug %}border-accent text-accent{% else %}border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-accent hover:text-accent{% endif %}">{{ c.name }}</a>
    {% endfor %}
  </nav>
  {% endif %}

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
    {% for post in posts %}
    <a href="/blog/{{ post.slug }}/" class="group block bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-xl overflow-hidden hover:border-accent transition-colors">
      {% if post.featured_image %}
        <div class="aspect-[16/10] overflow-hidden bg-slate-100 dark:bg-slate-800">
          <img src="{{ post.featured_image.file.url }}" alt="{{ post.featured_image.alt_text }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
        </div>
      {% else %}
        <div class="aspect-[16/10]" style="background:linear-gradient(135deg, var(--color-accent, #6C63FF), #ff7a59)"></div>
      {% endif %}
      <div class="p-5">
        <div class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400 flex items-center gap-2 mb-2">
          <time datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:"j M, Y" }}</time>
          {% if post.category %}<span class="text-slate-300 dark:text-slate-600">·</span><span style="color:{{ post.category.color }};">{{ post.category.name }}</span>{% endif %}
        </div>
        <h2 class="font-heading text-lg sm:text-xl font-semibold leading-tight group-hover:text-accent transition-colors">{{ post.title }}</h2>
        {% if post.excerpt %}<p class="mt-2 text-sm text-slate-600 dark:text-slate-400 leading-relaxed line-clamp-3">{{ post.excerpt }}</p>{% endif %}
      </div>
    </a>
    {% empty %}
    <p class="col-span-full py-12 text-center text-slate-500">No hay posts aún.</p>
    {% endfor %}
  </div>
</section>
{% endblock %}