---
layout: layouts/base.njk
pagination:
  data: collections.tagList
  size: 1
  alias: tag
  addAllPagesToCollections: true
permalink: /tags/{{ tag | slug }}/
eleventyComputed:
  title: "Posts tagged '{{ tag }}'"
---
<h1 class="text-2xl font-bold mb-6">Posts tagged 
  <span class="inline-block px-3 py-1 text-sm rounded-full text-white" 
        style="background-color: {{ tag | tagColor }}">#{{ tag }}</span>
</h1>

{% set currentSlug = (tag | slug) %}
{% set taggedPosts = [] %}
{% for post in collections.posts %}
  {% set matched = false %}
  {% if post.data.tags %}
    {% for t in post.data.tags %}
      {% if (t | slug) == currentSlug %}
        {% set matched = true %}
      {% endif %}
    {% endfor %}
  {% endif %}
  {% if matched %}
    {% set taggedPosts = (taggedPosts.push(post), taggedPosts) %}
  {% endif %}
{% endfor %}

{% if taggedPosts.length > 0 %}
<div class="space-y-6">
  {% for post in taggedPosts %}
    <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">
        {% 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 %}
      </div>
    </article>
  {% endfor %}
</div>
{% else %}
  <p class="text-gray-500">No posts found with this tag.</p>
{% endif %}