{# Blog index (docs/blog_index.html).
   Context: meta_data, canonical, title, phrases, categories,
   posts (newest first). #}
{% extends "base.html" %}

{% block page_title %}Blog — {{ title }}{% endblock %}

{% block meta %}
<meta name="description" content="All posts on {{ title }}.">
{% endblock %}

{% block content %}
<h1 class="text-3xl font-semibold tracking-tight">Blog</h1>

{% if categories %}
<section class="mt-8">
  <h2 class="text-sm font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Categories</h2>
  <ul class="mt-3 flex flex-wrap gap-2">
    {% for category in categories %}
    <li>
      <a href="/{{ category.link }}" class="inline-flex items-center gap-2 rounded-full border border-neutral-200 px-3 py-1 text-sm no-underline hover:border-amber-600 hover:text-amber-700 dark:border-neutral-700 dark:hover:border-amber-500 dark:hover:text-amber-500">
        {{ category.category }}
        <span class="text-xs text-neutral-500 dark:text-neutral-400">{{ category.count }}</span>
      </a>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}

<section class="mt-10">
  <h2 class="text-sm font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">All posts</h2>
  {% if posts %}
  <ul class="mt-3 divide-y divide-neutral-200 dark:divide-neutral-800">
    {% for post in posts %}
    <li class="py-4">
      <a href="{{ post.link }}" class="font-medium underline-offset-2 hover:underline">{{ post.title }}</a>
      {% if post.date %}<time datetime="{{ post.date.isoformat() }}" class="ml-2 text-xs text-neutral-500 dark:text-neutral-400">{{ post.date.strftime('%d %b %Y') }}</time>{% endif %}
      {% if post.category %}
      <span class="ml-2 rounded-full border border-neutral-200 px-2 py-0.5 text-xs text-neutral-500 dark:border-neutral-700 dark:text-neutral-400">{{ post.category }}</span>
      {% endif %}
      {% if post.summary %}<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">{{ post.summary }}</p>{% endif %}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="mt-3 text-neutral-600 dark:text-neutral-400">
    No posts yet. Add a Markdown file to <code class="rounded bg-neutral-100 px-1.5 py-0.5 text-sm dark:bg-neutral-800">source/post/</code>.
  </p>
  {% endif %}
</section>
{% endblock %}