{% extends 'public/base.html' %}

{% block title %}{{ '#' if not is_category|default(false) else '' }}{{ tag_name }} - {{ site_name }}{% endblock %}
{% block meta_description %}{{ tag_name }} — {{ site_name }}{% endblock %}

{% block schema %}
<script type="application/ld+json">{{ page_schema | tojson | safe }}</script>
{% endblock %}

{% block content %}
{% set _is_cat = is_category|default(false) %}

<div class="ap-page__header ap-page__header--top">
    <p class="ap-page__meta ap-page__meta--spaced">
        {{ pt('in_category') if _is_cat else pt('tagged_with') }}
    </p>
    <h1 class="ap-page__title">{{ tag_name }}</h1>
</div>

{% if posts.items or tagged_pages %}
<div class="ap-post-list--narrow">
    {% for post in posts.items %}
    <article class="ap-post-card">
        <h2 class="ap-post-card__title">
            <a href="{{ url_for('view_content', slug=post.slug) }}">{{ post.title }}</a>
        </h2>
        <div class="ap-post-card__meta">
            <time datetime="{{ post.published_at.isoformat() if post.published_at else '' }}">
                {{ post.published_at.strftime('%B %d, %Y') if post.published_at else '' }}
            </time>
            {% if post.category %}
            <span>· {{ post.category }}</span>
            {% endif %}
        </div>
        {% if post.excerpt %}
        <p class="ap-post-card__excerpt">{{ post.excerpt }}</p>
        {% endif %}
        <a href="{{ url_for('view_content', slug=post.slug) }}" class="ap-post-card__read-more">
            {{ pt('read_more') }} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </a>
    </article>
    {% endfor %}
    
    {% for page in tagged_pages %}
    <article class="ap-post-card">
        <h2 class="ap-post-card__title">
            <a href="{{ url_for('view_content', slug=page.slug) }}">{{ page.title }}</a>
        </h2>
        <div class="ap-post-card__meta">
            <time datetime="{{ page.updated_at.isoformat() }}">
                {{ page.updated_at.strftime('%B %d, %Y') }}
            </time>
        </div>
        {% if page.excerpt %}
        <p class="ap-post-card__excerpt">{{ page.excerpt }}</p>
        {% endif %}
        <a href="{{ url_for('view_content', slug=page.slug) }}" class="ap-post-card__read-more">
            {{ pt('read_more') }} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </a>
    </article>
    {% endfor %}
</div>

{% if posts.pages > 1 %}
<nav class="ap-pagination" aria-label="Pagination">
    {% if posts.has_prev %}
    <a href="{{ url_for('view_tag' if not _is_cat else 'view_category', tag_name=tag_name if not _is_cat else category_name, page=posts.prev_num) }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></a>
    {% endif %}
    
    {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
        {% if page_num %}
            {% if page_num == posts.page %}
            <span class="is-current">{{ page_num }}</span>
            {% else %}
            <a href="{{ url_for('view_tag' if not _is_cat else 'view_category', tag_name=tag_name if not _is_cat else category_name, page=page_num) }}">{{ page_num }}</a>
            {% endif %}
        {% else %}
            <span>…</span>
        {% endif %}
    {% endfor %}
    
    {% if posts.has_next %}
    <a href="{{ url_for('view_tag' if not _is_cat else 'view_category', tag_name=tag_name if not _is_cat else category_name, page=posts.next_num) }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
    {% endif %}
</nav>
{% endif %}

{% else %}
<div class="ap-empty-state">
    <p>{{ pt('no_content') }}</p>
</div>
{% endif %}
{% endblock %}