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

{% block title %}{% if lang and lang|slice:":2" == 'en' and article.title_en %}{{ article.title_en }}{% else %}{{ article.title_zh }}{% endif %} - {{ site_settings.brand_name }}{% endblock %}

{% block meta_description %}{{ article.meta_description|default:article.summary_zh }}{% endblock %}

{% block content %}
<article class="max-w-3xl mx-auto px-6 py-12">
    <!-- 标题区 -->
    <header class="mb-8 border-b border-charcoal/10 pb-8">
        <h1 class="text-3xl md:text-4xl font-serif font-bold leading-tight mb-4">
            {% if lang and lang|slice:":2" == 'en' and article.title_en %}
                {{ article.title_en }}
            {% else %}
                {{ article.title_zh }}
            {% endif %}
        </h1>
        <p class="text-lg text-charcoal/70 mb-4">
            {% if lang and lang|slice:":2" == 'en' and article.summary_en %}
                {{ article.summary_en }}
            {% else %}
                {{ article.summary_zh }}
            {% endif %}
        </p>
        <div class="flex items-center justify-between text-sm text-charcoal/50">
            <span>{% if article.published_at %}{{ article.published_at|date:"Y-m-d" }}{% endif %}</span>
            <span>{% trans "阅读" %} {{ article.view_count }}</span>
        </div>
    </header>

    <!-- 封面图 -->
    {% if article.cover_image %}
        <img src="{{ article.cover_image.url }}" alt="{{ article.title_zh }}"
             class="w-full rounded-lg mb-8">
    {% endif %}

    <!-- 正文 -->
    <div class="article-body text-charcoal/90 leading-relaxed">
        {{ rendered_body|safe }}
    </div>

    <!-- 关联人物 -->
    {% if article.related_people.all %}
        <section class="mt-12 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 person in article.related_people.all %}
                    {% include 'partials/person_card.html' %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    <!-- 标签 -->
    {% if article.tags.all %}
        <section class="mt-8 flex flex-wrap gap-2">
            {% for tag in article.tags.all %}
                <a href="/search/?tag={{ tag.slug }}"
                   class="px-3 py-1 text-xs bg-charcoal/5 text-charcoal/70 rounded hover:bg-burgundy hover:text-warm-white transition">
                    {{ tag.name_zh }}
                </a>
            {% endfor %}
        </section>
    {% endif %}

    <!-- 分享 -->
    <section class="mt-8 pt-8 border-t border-charcoal/10 flex items-center space-x-4" x-data="{ copied: false }">
        <span class="text-sm text-charcoal/50">{% trans "分享" %}：</span>
        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri }}"
           target="_blank" class="text-sm text-charcoal/60 hover:text-burgundy">LinkedIn</a>
        <a href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri }}"
           target="_blank" class="text-sm text-charcoal/60 hover:text-burgundy">X</a>
        <button @click="navigator.clipboard.writeText(window.location.href); copied = true"
                class="text-sm text-charcoal/60 hover:text-burgundy">
            <span x-show="!copied">{% trans "复制链接" %}</span>
            <span x-show="copied" x-cloak>{% trans "已复制" %}</span>
        </button>
    </section>

    <!-- 相关文章 -->
    {% if related_articles %}
        <section class="mt-12 pt-8 border-t border-charcoal/10">
            <h2 class="text-xl font-serif font-bold mb-6">{% trans "相关文章" %}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {% for rel in related_articles %}
                    {% include 'partials/article_card.html' with article=rel article_type=article_type %}
                {% endfor %}
            </div>
        </section>
    {% endif %}
</article>
{% endblock %}