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

{% block title %}
{% if category_title %}{{ category_title }} - 技术博客
{% elif tag_title %}{{ tag_title }} - 技术博客
{% else %}首页 - 技术博客{% endif %}
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>
        {% if category_title %}
            {{ category_title }}
        {% elif tag_title %}
            标签: {{ tag_title }}
        {% else %}
            技术文章
        {% endif %}
    </h1>
</div>

{% if articles.items %}
<div class="article-list">
    {% for article in articles.items %}
    <article class="article-card">
        {% if article.cover_image %}
        <div class="article-cover">
            <img src="{{ article.cover_image }}" alt="{{ article.title }}">
        </div>
        {% endif %}
        
        <div class="article-body">
            <h2 class="article-title">
                <a href="{{ url_for('frontend.article', slug=article.slug) }}">
                    {{ article.title }}
                </a>
            </h2>
            
            <div class="article-meta">
                {% if article.category %}
                <span class="category">{{ article.category.name }}</span>
                {% endif %}
                <span class="date">{{ article.published_at|datetime_format('%Y-%m-%d') }}</span>
                <span class="views">{{ article.view_count }} 阅读</span>
            </div>
            
            <p class="article-summary">{{ article.summary|truncate_content(200) }}</p>
            
            {% if article.tags %}
            <div class="article-tags">
                {% for tag in article.tags %}
                <a href="{{ url_for('frontend.tag', tag_id=tag.id) }}" 
                   class="tag" style="--tag-color: {{ tag.color }}">
                    {{ tag.name }}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </article>
    {% endfor %}
</div>

<!-- 分页 -->
{% if articles.pages > 1 %}
<div class="pagination">
    {% if articles.has_prev %}
    <a href="{{ url_for('frontend.index', page=articles.prev_num, category=current_category, tag=current_tag) }}" 
       class="page-link">上一页</a>
    {% endif %}
    
    {% for page in articles.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
        {% if page %}
            {% if page == articles.page %}
            <span class="page-link active">{{ page }}</span>
            {% else %}
            <a href="{{ url_for('frontend.index', page=page, category=current_category, tag=current_tag) }}" 
               class="page-link">{{ page }}</a>
            {% endif %}
        {% else %}
        <span class="page-link ellipsis">...</span>
        {% endif %}
    {% endfor %}
    
    {% if articles.has_next %}
    <a href="{{ url_for('frontend.index', page=articles.next_num, category=current_category, tag=current_tag) }}" 
       class="page-link">下一页</a>
    {% endif %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
    <p>暂无文章</p>
</div>
{% endif %}
{% endblock %}