{% load i18n %}
<div class="text-center group">
    <a href="{% url 'person_detail' slug=person.slug %}" class="block">
        {% if person.avatar %}
            <img src="{{ person.avatar.url }}" alt="{{ person.name_zh }}"
                 class="w-24 h-24 rounded-full object-cover mx-auto mb-3">
        {% else %}
            <div class="w-24 h-24 rounded-full bg-charcoal/10 mx-auto mb-3 flex items-center justify-center text-2xl text-charcoal/40">
                {{ person.name_zh|first }}
            </div>
        {% endif %}
        <h3 class="text-base font-semibold text-charcoal group-hover:text-burgundy transition">
            {% if lang and lang|slice:":2" == 'en' and person.name_en %}
                {{ person.name_en }}
            {% else %}
                {{ person.name_zh }}
            {% endif %}
        </h3>
        <p class="text-sm text-charcoal/60">{{ person.title }} · {{ person.company }}</p>
    </a>
</div>