{#- 글 한 편. 날짜는 mono 로 찍는다 — 월 약어를 쓰려면 i18n 키가 언어당 12개
    필요한데, 숫자는 두 언어에서 같게 읽히고 tabular-nums 로 자리가 맞는다. #}
{% extends "base.html" %}
{% from "partials/toc.html" import toc_list %}
{% from "partials/lang.html" import lang_switch %}

{% block content %}
<article class="wrap wrap-read">
  <header class="page-head" data-reveal>
    {%- if page.section %}
    <nav class="crumbs" aria-label="{{ t("breadcrumb") }}">
      <a href="{{ page.section.url }}">{{ page.section.title }}</a>
    </nav>
    {%- endif %}
    <h1 class="page-title">{{ page.title }}</h1>
    {%- if page.description %}
    <p class="page-lede">{{ page.description }}</p>
    {%- endif %}
    {#- 날짜와 언어는 같은 줄에 선다. 둘 다 "이 문서가 무엇인가"에 대한 사실이고,
        따로 세우면 제목과 본문 사이에 줄이 하나 더 생긴다.
        바깥 if 가 필요한 이유: 이 div 안에는 줄바꿈이 있어서 둘 다 없을 때
        :empty 가 안 걸린다. 목록 템플릿은 한 줄로 붙어 있어 걸린다. #}
    {%- if page.date or page.translations %}
    <div class="page-meta">
      {%- if page.date %}
      <time datetime="{{ page.date.date }}">{{ page.date.year }}.{% if page.date.month < 10 %}0{% endif %}{{ page.date.month }}.{% if page.date.day < 10 %}0{% endif %}{{ page.date.day }}</time>
      {%- endif %}
      {{ lang_switch(page) }}
    </div>
    {%- endif %}
  </header>

  <div class="fence" aria-hidden="true">+++</div>

  {%- if page.toc and page.toc_entries %}
  <nav class="toc" aria-label="{{ t("on_this_page") }}">
    <p class="toc-label">{{ t("on_this_page") }}</p>
    {{ toc_list(page.toc_entries) }}
  </nav>
  {%- endif %}

  <div class="prose">
    {{ page.content | safe }}
  </div>

  {%- if page.prev or page.next %}
  <nav class="pager" aria-label="{{ t("menu") }}">
    {#- 이전/다음의 라벨은 방향이 아니라 목적지를 말한다. "다음"만 적힌 링크는
        누르기 전에는 어디로 가는지 알 수 없다. #}
    {%- if page.prev %}
    <a class="pager-link pager-prev" href="{{ page.prev.url }}">
      <span class="pager-dir">{{ t("previous") }}</span>
      <span class="pager-title">{{ page.prev.title }}</span>
    </a>
    {%- endif %}
    {%- if page.next %}
    <a class="pager-link pager-next" href="{{ page.next.url }}">
      <span class="pager-dir">{{ t("next") }}</span>
      <span class="pager-title">{{ page.next.title }}</span>
    </a>
    {%- endif %}
  </nav>
  {%- endif %}
</article>
{% endblock %}