{% extends "madga/blog/base.html" %}

{% block title %}Blog · {{ site.name }}{% endblock %}

{% block content %}
<section class="max-w-3xl mx-auto px-4 sm:px-6 py-10 sm:py-14">
  <header class="mb-8 sm:mb-12">
    <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 -mt-4">
    <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 %}

  <ul class="divide-y divide-slate-100 dark:divide-slate-800">
    {% for post in posts %}
    <li class="py-6 sm:py-8 first:pt-0">
      <a href="/blog/{{ post.slug }}/" class="group block">
        <div class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400 flex flex-wrap 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-xl sm:text-2xl font-semibold leading-tight group-hover:text-accent transition-colors">{{ post.title }}</h2>
        {% if post.excerpt %}<p class="mt-2 text-slate-600 dark:text-slate-400 leading-relaxed">{{ post.excerpt }}</p>{% endif %}
      </a>
    </li>
    {% empty %}
    <li class="py-12 text-center text-slate-500">No hay posts aún.</li>
    {% endfor %}
  </ul>
</section>
{% endblock %}