{% extends "base.html" %}

{% block title %}{{ page.title }} — {{ site.title }}{% endblock %}

{# A post with headings gets the two-column layout: the centered article on the
   left, its table of contents in a narrow full-height side panel on the right
   (see main.css). Posts with no headings keep the plain centered reading column. #}

{% macro post_header() %}
  <header>
    <h1>{{ page.title }}</h1>
    {% if page.date %}<time>{{ page.date }}</time>{% endif %}
    {% if terms.get('tags') %}
    <ul class="tags">
      {% for term in terms['tags'] %}
      <li><a href="{{ term.url }}">{{ term.name }}</a></li>
      {% endfor %}
    </ul>
    {% endif %}
  </header>
{% endmacro %}

{% block content %}
  {% if page.toc %}
  <div class="panel-grid">
    <article class="post panel-main">
      {{ post_header() }}
      {# Single-content templates may use the full rendered body. #}
      <div class="body">{{ page.body_html | safe }}</div>
    </article>
    <aside class="panel-aside">
      <div class="panel-aside-inner">
        {# page.toc is a flat, in-order list of body headings; indent by level. #}
        <nav class="toc" aria-label="Table of contents">
          <ul>
            {% for heading in page.toc %}
            <li class="toc-h{{ heading.level }}"><a href="{{ heading.url }}">{{ heading.text }}</a></li>
            {% endfor %}
          </ul>
        </nav>
      </div>
    </aside>
  </div>
  {% else %}
  <article class="post">
    {{ post_header() }}
    <div class="body">{{ page.body_html | safe }}</div>
  </article>
  {% endif %}
{% endblock %}