{% extends 'base.html' %}

{% block content %}
    {% for post in post_list %}
    <article class="post-item">
        <div class="post-title">
            <h2><a href="{% url 'detail' post.id %}">{{ post.title }}</a></h2>
        </div>
        
        <div class="post-meta">
            <span><i>👁️</i> {{ post.views }} 次阅读</span>
            <span><i>💬</i> {{ post.comment_set.count }} 条评论</span>
            <span><i>📅</i> {{ post.created_time|date:"Y-m-d" }}</span>
            <!-- 显示文章所属分类 -->
            <span><i>🏷️</i> {{ post.category.name }}</span>
        </div>
        
        <div class="post-content">
            {{ post.excerpt|default:post.content|truncatewords:35 }}
        </div>
        
        <a href="{% url 'detail' post.id %}" class="read-more">
            阅读全文 →
        </a>
        
        <div class="post-footer">
            <div class="post-tags">
                <span class="tag">{{ post.category.name }}</span>
                {% for tag in post.primary_tags.all %}
                <span class="tag">{{ tag.name }}</span>
                {% endfor %}
                {% for tag in post.secondary_tags.all|slice:":3" %}
                <span class="tag">#{{ tag.name }}</span>
                {% endfor %}
            </div>
            <div class="post-author">
                作者：{{ post.author.username }}
            </div>
        </div>
    </article>
    {% empty %}
    <div class="post-item" style="text-align: center; padding: 60px 30px;">
        <h3 style="color: var(--text-light); margin-bottom: 15px;">
            {% if current_category_id %}
                该分类下暂无文章
            {% else %}
                暂无文章
            {% endif %}
        </h3>
        <p style="color: var(--text-light);">欢迎关注南京非物质文化遗产，精彩内容即将呈现...</p>
    </div>
    {% endfor %}

    <!-- 分页功能（可选） -->
    {% if post_list.has_other_pages %}
    <div class="pagination" style="padding: 30px; text-align: center;">
        {% if post_list.has_previous %}
            <a href="?page={{ post_list.previous_page_number }}" class="read-more">上一页</a>
        {% endif %}
        
        <span style="margin: 0 20px; color: var(--text-light);">
            第 {{ post_list.number }} 页，共 {{ post_list.paginator.num_pages }} 页
        </span>
        
        {% if post_list.has_next %}
            <a href="?page={{ post_list.next_page_number }}" class="read-more">下一页</a>
        {% endif %}
    </div>
    {% endif %}
{% endblock %}