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

{% block title %}{% trans "HR Leader Directory" %} - {{ 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">HR Leader Directory</h1>

    {% if persons %}
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
            {% for person in persons %}
                {% include 'partials/person_card.html' %}
            {% endfor %}
        </div>

        {% if persons.has_other_pages %}
            <nav class="flex justify-center items-center space-x-4 mt-12">
                {% if persons.has_previous %}
                    <a href="?page={{ persons.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">{{ persons.number }} / {{ persons.paginator.num_pages }}</span>
                {% if persons.has_next %}
                    <a href="?page={{ persons.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 %}