{% extends "base.html" %}
{% block seo_tags %}
<meta property="og:title" content="Category: {{ category }} - {{ config.title | title }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ config.rootUrl }}/categories/{{ category }}" />
<meta property="og:description" content="Posts on category {{ category }}" />
<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/{{ category }}" />
<meta name="robots" content="index, follow" />
{% endblock seo_tags %}
{% block title %}Category: {{ category }}{% endblock title %}
{% block content %}
<div>
  <h1>Posts in {{ category }}</h1>
  <p class="text-sm text-text/70"><i>All the posts with the category "{{ category }}"</i></p>
  <ul class="mt-6 pt-6 border-t border-t-base-alt dark:border-t-[#39394b]">
    {% for post in posts | filter(attribute="draft", value=false) | sort(attribute="created") | reverse %}
      {% if category in post.categories %}
        <li>
          <div class="flex flex-col md:flex-row space-x-4">
            <a class="font-mono text-lg w-fit no-underline! hover:underline! hover:decoration-dashed" href="{{ post.permalink }}">{{ post.title }}</a>
            <time class="text-grey text-sm italic"> on <strong>{{ post.created | date(format="%B %e, %Y") }}</strong></time>
          </div>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
{% endblock content %}