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

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

{% block content %}
{% if has_blocks %}
  {% for block in blocks %}
    {% include "madga/blog/blocks/_block.html" with block=block %}
  {% endfor %}
{% else %}
  <section class="max-w-3xl mx-auto px-4 sm:px-6 py-12 sm:py-20">
    <div class="mb-12 sm:mb-16">
      <h1 class="font-heading text-4xl sm:text-6xl font-semibold tracking-tight leading-[1.05]">
        {{ site.name }}
      </h1>
      {% if site.description %}
        <p class="mt-4 sm:mt-6 text-lg sm:text-xl text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">{{ site.description }}</p>
      {% endif %}
    </div>

    {% if posts %}
    <section class="mt-12">
      <h2 class="text-sm uppercase tracking-wider text-slate-500 mb-6">Últimos posts</h2>
      <ul class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for post in posts %}
        <li class="py-5 first:pt-0">
          <a href="/blog/{{ post.slug }}/" class="group flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-6">
            <time class="text-sm text-slate-500 sm:w-28 shrink-0" datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:"j M, Y" }}</time>
            <span class="font-medium leading-snug group-hover:text-accent transition-colors">{{ post.title }}</span>
          </a>
        </li>
        {% endfor %}
      </ul>
      <a href="/blog/" class="inline-block mt-6 text-sm text-accent hover:underline">Ver todo el blog →</a>
    </section>
    {% endif %}
  </section>
{% endif %}
{% endblock %}