{% extends "base.html" %}
{% block seo_tags %}
<meta property="og:title" content="Categories - {{ config.title | title }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ config.rootUrl }}/categories" />
<meta property="og:description" content="Posts categories" />
<meta property="og:site_name" content="{{ config.title }}" />
<meta property="og:locale" content="{{ config.language }}" />
{# TODO: add support for og:image using metadata #}
<link rel="canonical" href="{{ config.rootUrl }}/categories" />
<meta name="robots" content="index, follow" />
{% endblock seo_tags %}
{% block title %}Categories{% endblock title %}
{% block content %}
<div>
  <h1>Categories</h1>
  <p class="text-sm text-text/70"><i>All the categories used in posts.</i></p>
  <ul class="mt-6 pt-6 border-t border-t-base-alt dark:border-t-[#39394b]">
    {% for category in categories | sort %}
      {%- set_global cat_posts = 0 -%}
      {% for post in posts %}
        {% if category in post.categories %}
          {%- set_global cat_posts = cat_posts + 1 -%}
        {% endif %}
      {% endfor %}
      <li>
        <a class="font-mono text-lg no-underline! hover:underline! hover:decoration-dashed" href="/categories/{{ category }}">{{ category }}</a>
        <span class="text-grey">({{ cat_posts }} post{{ cat_posts | pluralize }})</span>
      </li>
    {% endfor %}
  </ul>
</div>
{% endblock content %}