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

{% block title %}{{ post.meta_title|default:post.title }} · {{ site.name }}{% endblock %}
{% block meta_description %}{{ post.meta_description|default:post.excerpt }}{% endblock %}
{% block og_title %}{{ post.meta_title|default:post.title }}{% endblock %}
{% block og %}
  {{ block.super }}
  {% if post.og_image %}<meta property="og:image" content="{{ post.og_image.file.url }}">{% endif %}
  {% if post.canonical_url %}<link rel="canonical" href="{{ post.canonical_url }}">{% endif %}
{% endblock %}

{% block content %}
<article class="max-w-3xl mx-auto px-4 sm:px-6 py-10 sm:py-16">
  <header class="mb-10 sm:mb-12">
    <div class="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400 flex flex-wrap items-center gap-2 mb-3">
      <time datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:"j F, Y" }}</time>
      {% if post.category %}<span class="text-slate-300">·</span><span style="color:{{ post.category.color }};">{{ post.category.name }}</span>{% endif %}
      {% if post.author %}<span class="text-slate-300">·</span><span>{{ post.author.get_full_name|default:post.author.username }}</span>{% endif %}
    </div>
    <h1 class="font-heading text-3xl sm:text-5xl font-semibold tracking-tight leading-tight">{{ post.title }}</h1>
    {% if post.excerpt %}<p class="mt-4 text-lg text-slate-600 dark:text-slate-400 leading-relaxed">{{ post.excerpt }}</p>{% endif %}
  </header>

  {% if post.featured_image %}
  <figure class="mb-10 -mx-4 sm:mx-0">
    <img src="{{ post.featured_image.file.url }}" alt="{{ post.featured_image.alt_text }}" class="w-full sm:rounded-xl">
    {% if post.featured_image.caption %}<figcaption class="mt-2 text-sm text-center text-slate-500">{{ post.featured_image.caption }}</figcaption>{% endif %}
  </figure>
  {% endif %}

  <div class="prose">
    {{ post.body_html|safe }}
  </div>

  {% if post.tags.all %}
  <div class="mt-12 flex flex-wrap gap-2">
    {% for t in post.tags.all %}
      <a href="/blog/?tag={{ t.slug }}" class="text-xs px-3 py-1 rounded-full border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-accent hover:text-accent">#{{ t.name }}</a>
    {% endfor %}
  </div>
  {% endif %}

  <nav class="mt-12 pt-6 border-t border-slate-100 dark:border-slate-800">
    <a href="/blog/" class="text-sm text-slate-500 hover:text-accent">← Volver al blog</a>
  </nav>
</article>
{% endblock %}