---
layout: layouts/base.njk
pagination:
  data: collections.categoryList
  size: 1
  alias: category
  addAllPagesToCollections: true
permalink: /categories/{{ category | slug }}/
eleventyComputed:
  title: "Posts in '{{ category }}'"
---
<h1 class="text-2xl font-bold mb-6">Posts in
  <span class="inline-block px-3 py-1 text-sm rounded-full bg-purple-600 text-white">{{ category }}</span>
</h1>

{% set catPosts = [] %}
{% for post in collections.posts %}
  {% if post.data.category and post.data.category == category %}
    {% set catPosts = (catPosts.push(post), catPosts) %}
  {% endif %}
{% endfor %}

{% if catPosts.length > 0 %}
<div class="space-y-6">
  {% for post in catPosts %}
    <article class="border-b pb-6">
      <h2 class="text-xl font-semibold">
        <a href="{{ post.url }}" class="hover:text-blue-600">{{ post.data.title }}</a>
      </h2>
      <time class="text-sm text-gray-500" datetime="{{ post.date | htmlDateString }}">
        {{ post.date | readableDate }}
      </time>
      <p class="mt-2 text-gray-700 dark:text-gray-300">
        {{ post.data.description or (post.templateContent | striptags | truncate(160)) }}
      </p>
      <div class="mt-2 text-sm space-x-2">
        {% if post.data.tags %}
          {% for postTag in post.data.tags %}
            <a class="px-2 py-0.5 rounded text-white text-xs hover:opacity-80" 
               style="background-color: {{ postTag | tagColor }}" 
               href="/tags/{{ postTag | slug }}/">#{{ postTag }}</a>
          {% endfor %}
        {% endif %}
      </div>
    </article>
  {% endfor %}
</div>
{% else %}
  <p class="text-gray-500">No posts found in this category.</p>
{% endif %}