{% 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 content %}
{# Docs: TOC sidebar, monospace headings, anchor-friendly. #}
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-10 grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-10">
  <aside class="lg:sticky lg:top-24 lg:self-start text-sm">
    <div class="text-xs uppercase tracking-wide text-slate-500 mb-3 font-medium">En esta página</div>
    <nav id="docs-toc" class="space-y-1.5 text-slate-600 dark:text-slate-400">
      <p class="text-xs italic text-slate-400">El TOC se genera del HTML al cargar.</p>
    </nav>
    <div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800">
      <a href="/blog/" class="text-xs text-slate-500 hover:text-accent">← Todos los docs</a>
    </div>
  </aside>

  <article>
    <header class="mb-8 pb-6 border-b border-slate-100 dark:border-slate-800">
      <h1 class="font-heading text-3xl sm:text-4xl font-semibold tracking-tight leading-tight" style="font-family:var(--font-mono, ui-monospace);">{{ post.title }}</h1>
      <div class="mt-3 text-xs text-slate-500">
        Actualizado {{ post.updated_at|date:"j F, Y" }}
        {% if post.author %}&nbsp;·&nbsp;{{ post.author.get_full_name|default:post.author.username }}{% endif %}
      </div>
    </header>

    <div class="prose docs-prose" id="docs-body">
      <style>
        .docs-prose h2 { font-family: var(--font-mono, ui-monospace); margin-top: 2.5em; padding-top: 0.5em;
                        border-top: 1px solid rgba(127,127,127,.15); }
        .docs-prose h3 { font-family: var(--font-mono, ui-monospace); }
        .docs-prose code { background: rgba(127,127,127,.1); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
        .docs-prose pre { background: #0f1117; color: #e7e9ed; padding: 1rem; border-radius: 8px;
                          overflow-x: auto; font-size: .85rem; }
      </style>
      {{ post.body_html|safe }}
    </div>
  </article>
</div>

<script>
// Auto-generate TOC from h2/h3 in the rendered body.
(function () {
  const body = document.getElementById('docs-body');
  const toc = document.getElementById('docs-toc');
  if (!body || !toc) return;
  const headings = body.querySelectorAll('h2, h3');
  if (!headings.length) return;
  toc.innerHTML = '';
  headings.forEach((h, i) => {
    const id = 'sec-' + (i + 1);
    h.id = id;
    const a = document.createElement('a');
    a.href = '#' + id;
    a.textContent = h.textContent;
    a.className = 'block hover:text-accent transition-colors ' + (h.tagName === 'H3' ? 'pl-3 text-xs' : '');
    toc.appendChild(a);
  });
})();
</script>
{% endblock %}