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

{% block content %}
{# Compact: title + date, dense rows, no excerpt. #}
<section class="max-w-2xl mx-auto px-4 sm:px-6 py-10 sm:py-14">
  <header class="mb-6">
    <h1 class="font-heading text-2xl sm:text-3xl font-semibold tracking-tight">
      {% if category %}{{ category.name }}{% elif tag %}#{{ tag.name }}{% else %}Blog{% endif %}
    </h1>
  </header>

  {% if categories %}
  <nav class="flex flex-wrap gap-2 mb-6 text-sm">
    <a href="/blog/" class="{% if not category and not tag %}text-accent font-medium{% else %}text-slate-500 hover:text-accent{% endif %}">Todos</a>
    {% for c in categories %}
      <span class="text-slate-300">·</span>
      <a href="/blog/?category={{ c.slug }}" class="{% if category and category.slug == c.slug %}text-accent font-medium{% else %}text-slate-500 hover:text-accent{% endif %}">{{ c.name }}</a>
    {% endfor %}
  </nav>
  {% endif %}

  <ol class="space-y-1.5">
    {% for post in posts %}
    <li>
      <a href="/blog/{{ post.slug }}/" class="group flex items-baseline gap-3 py-1.5">
        <time class="text-xs text-slate-400 tabular-nums shrink-0 w-20" datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:"j M Y" }}</time>
        <span class="text-sm group-hover:text-accent transition-colors">{{ post.title }}</span>
      </a>
    </li>
    {% empty %}
    <li class="py-12 text-center text-slate-500">No hay posts aún.</li>
    {% endfor %}
  </ol>
</section>
{% endblock %}