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

{% block title %}{% if lang and lang|slice:":2" == 'en' and person.name_en %}{{ person.name_en }}{% else %}{{ person.name_zh }}{% endif %} - {{ site_settings.brand_name }}{% endblock %}

{% block content %}
<section class="max-w-4xl mx-auto px-6 py-12">
    <!-- 人物头部 -->
    <header class="text-center mb-10">
        {% if person.avatar %}
            <img src="{{ person.avatar.url }}" alt="{{ person.name_zh }}"
                 class="w-32 h-32 rounded-full object-cover mx-auto mb-4">
        {% else %}
            <div class="w-32 h-32 rounded-full bg-charcoal/10 mx-auto mb-4 flex items-center justify-center text-4xl text-charcoal/40">
                {{ person.name_zh|first }}
            </div>
        {% endif %}
        <h1 class="text-3xl font-serif font-bold mb-2">
            {% if lang and lang|slice:":2" == 'en' and person.name_en %}
                {{ person.name_en }}
            {% else %}
                {{ person.name_zh }}
            {% endif %}
        </h1>
        <p class="text-charcoal/60">{{ person.title }} · {{ person.company }} · {{ person.industry }}</p>
        {% if person.linkedin_url %}
            <a href="{{ person.linkedin_url }}" target="_blank" class="inline-block mt-3 text-sm text-electric-blue hover:underline">LinkedIn</a>
        {% endif %}
    </header>

    <!-- 简介 -->
    {% if person.bio_zh or person.bio_en %}
        <section class="mb-8">
            <h2 class="text-xl font-serif font-bold mb-4">{% trans "简介" %}</h2>
            <p class="text-charcoal/80 leading-relaxed">
                {% if lang and lang|slice:":2" == 'en' and person.bio_en %}
                    {{ person.bio_en }}
                {% else %}
                    {{ person.bio_zh }}
                {% endif %}
            </p>
        </section>
    {% endif %}

    <!-- 职业经历 -->
    {% if person.career_history %}
        <section class="mb-8">
            <h2 class="text-xl font-serif font-bold mb-4">{% trans "职业经历" %}</h2>
            <p class="text-charcoal/80 leading-relaxed whitespace-pre-line">{{ person.career_history }}</p>
        </section>
    {% endif %}

    <!-- 核心领域 -->
    {% if person.core_domains %}
        <section class="mb-8">
            <h2 class="text-xl font-serif font-bold mb-4">{% trans "核心领域" %}</h2>
            <div class="flex flex-wrap gap-2">
                {% for domain in person.core_domains|split:"," %}
                    <span class="px-3 py-1 text-sm bg-charcoal/5 rounded">{{ domain|trim }}</span>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    <!-- 相关访谈 -->
    {% if interviews %}
        <section class="mb-8 pt-8 border-t border-charcoal/10">
            <h2 class="text-xl font-serif font-bold mb-6">HR Observer Interview</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {% for article in interviews %}
                    {% include 'partials/article_card.html' with article=article article_type='interview' %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    <!-- 相关人物 -->
    {% if related_people %}
        <section class="mb-8 pt-8 border-t border-charcoal/10">
            <h2 class="text-xl font-serif font-bold mb-6">{% trans "相关人物" %}</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                {% for p in related_people %}
                    {% include 'partials/person_card.html' with person=p %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    <!-- 分享 -->
    <section class="pt-8 border-t border-charcoal/10">
        <p class="text-sm text-charcoal/50">
            {% trans "分享此人物档案" %}：
            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri }}"
               target="_blank" class="text-electric-blue hover:underline ml-2">LinkedIn</a>
        </p>
    </section>
</section>
{% endblock %}