{% extends 'base.html' %}
{% load i18n %}

{% block title %}{{ section_label }} - {{ site_settings.brand_name }}{% endblock %}

{% block content %}
<section class="max-w-7xl mx-auto px-6 py-12">
    <h1 class="text-3xl md:text-4xl font-serif font-bold mb-8">{{ section_label }}</h1>

    {% if articles %}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for article in articles %}
                {% include 'partials/article_card.html' with article=article article_type=article_type %}
            {% endfor %}
        </div>

        {% if articles.has_other_pages %}
            <nav class="flex justify-center items-center space-x-4 mt-12">
                {% if articles.has_previous %}
                    <a href="?page={{ articles.previous_page_number }}" class="px-4 py-2 border border-charcoal/20 rounded hover:bg-charcoal hover:text-warm-white transition">
                        ← {% trans "上一页" %}
                    </a>
                {% endif %}
                <span class="text-sm text-charcoal/60">{% trans "第" %} {{ articles.number }} {% trans "页" %} / {{ articles.paginator.num_pages }} {% trans "页" %}</span>
                {% if articles.has_next %}
                    <a href="?page={{ articles.next_page_number }}" class="px-4 py-2 border border-charcoal/20 rounded hover:bg-charcoal hover:text-warm-white transition">
                        {% trans "下一页" %} →
                    </a>
                {% endif %}
            </nav>
        {% endif %}
    {% else %}
        <p class="text-charcoal/50 text-center py-16">{% trans "暂无内容" %}</p>
    {% endif %}
</section>
{% endblock %}