{% extends "base.html" %}

{% block content %}
<div class="tag-page">
    <header class="tag-header">
        <div class="breadcrumbs">
            <a href="/">Home</a>
            <span class="separator">/</span>
            <span class="current">Tag: {{ tag_name }}</span>
        </div>

        <h1 class="page-title">
            <span class="tag-badge">{{ tag_name }}</span>
        </h1>
        <p class="page-subtitle">{{ documents | length }} document{% if documents | length != 1 %}s{% endif %} with this tag</p>
    </header>

    <div class="tag-content">
        <section class="documents-section">
            <div class="document-list">
                {% for doc in documents %}
                <a href="/doc/{{ doc.slug }}" class="document-card horizontal">
                    <div class="document-card-content">
                        <h3 class="document-title">{{ doc.title }}</h3>
                        {% if doc.summary %}
                        <p class="document-summary">{{ doc.summary[:200] }}{% if doc.summary | length > 200 %}...{% endif %}</p>
                        {% endif %}
                        <div class="document-tags">
                            {% for tag in doc.tags %}
                            <span class="tag {% if tag == tag_name %}current{% endif %}">{{ tag }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </section>

        <aside class="tag-sidebar">
            <h3 class="sidebar-title">All Tags</h3>
            <div class="all-tags-list">
                {% for name, count in all_tags.items() %}
                <a href="/tags/{{ name }}" class="tag-item {% if name == tag_name %}active{% endif %}">
                    {{ name }} <span class="count">({{ count }})</span>
                </a>
                {% endfor %}
            </div>
        </aside>
    </div>
</div>
{% endblock %}