{% extends "blog/base.html" %}

{% block breadcrumb %}
<nav class="breadcrumb">
    <span class="current">{{ page_title|default:"首页" }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="page-header">
    <h2>{{ page_title }}</h2>
</div>

{% for post in page_obj %}
<article class="post-card">
    {% if post.is_top %}
    <span class="badge top">置顶</span>
    {% endif %}
    {% if post.cover_image %}
    <div class="post-cover">
        <img src="{{ post.cover_image.url }}" alt="{{ post.title }}" loading="lazy">
    </div>
    {% endif %}
    <h3 class="post-title">
        <a href="{% url 'blog:post_detail' post.slug %}">{{ post.title }}</a>
    </h3>
    <div class="post-meta">
        <span class="author">{{ post.author.get_full_name|default:post.author.username }}</span>
        <span class="date">{{ post.published_at|date:"Y-m-d" }}</span>
        {% if post.category %}
        <a href="{% url 'blog:category_posts' post.category.slug %}" class="category">{{ post.category.name }}</a>
        {% endif %}
        <span class="views">阅读 {{ post.views }}</span>
        <span class="reading-time">约 {{ post.get_reading_time }} 分钟</span>
    </div>
    <p class="post-summary">{{ post.get_summary }}</p>
    <div class="post-tags">
        {% for tag in post.tags.all %}
        <a href="{% url 'blog:tag_posts' tag.slug %}" class="tag">{{ tag.name }}</a>
        {% endfor %}
    </div>
    <a href="{% url 'blog:post_detail' post.slug %}" class="read-more">阅读全文 &rarr;</a>
</article>
{% empty %}
<div class="empty-state">
    <p>暂无文章</p>
</div>
{% endfor %}

{% if page_obj.has_other_pages %}
<nav class="pagination">
    {% if page_obj.has_previous %}
    <a href="?page=1{% if query %}&q={{ query }}{% endif %}">&laquo; 首页</a>
    <a href="?page={{ page_obj.previous_page_number }}{% if query %}&q={{ query }}{% endif %}">上一页</a>
    {% endif %}
    <span class="current">第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页</span>
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}{% if query %}&q={{ query }}{% endif %}">下一页</a>
    <a href="?page={{ page_obj.paginator.num_pages }}{% if query %}&q={{ query }}{% endif %}">末页 &raquo;</a>
    {% endif %}
</nav>
{% endif %}
{% endblock %}