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

{% block title %}{% trans "搜索" %} - {{ site_settings.brand_name }}{% endblock %}

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

    <form method="get" action="/search/" class="max-w-2xl mb-8 flex">
        <input type="text" name="q" value="{{ query|default:'' }}"
               placeholder="{% trans '输入关键词搜索文章、人物...' %}"
               class="flex-1 px-4 py-3 border border-charcoal/20 rounded-l focus:outline-none focus:border-burgundy">
        <button type="submit" class="px-6 py-3 bg-charcoal text-warm-white rounded-r hover:bg-burgundy transition">
            {% trans "搜索" %}
        </button>
    </form>

    {% if warning == 'too_short' %}
        <p class="text-charcoal/50 mb-8">{% trans "请输入至少 2 个字符" %}</p>
    {% endif %}

    {% if query and not warning %}
        <p class="text-sm text-charcoal/60 mb-8">
            {% trans "搜索" %} "{{ query }}" {% trans "的结果" %}
        </p>
    {% endif %}

    <!-- 文章结果 -->
    {% if articles %}
        <section class="mb-12">
            <h2 class="text-xl font-serif font-bold mb-6">{% trans "文章" %} ({{ articles.paginator.count }})</h2>
            <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.article_type %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    <!-- 人物结果 -->
    {% if persons %}
        <section class="mb-12">
            <h2 class="text-xl font-serif font-bold mb-6">{% trans "人物" %} ({{ persons.paginator.count }})</h2>
            <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>
        </section>
    {% endif %}

    {% if not articles and not persons and query and not warning %}
        <p class="text-charcoal/50 text-center py-16">{% trans "未找到匹配结果" %}</p>
    {% endif %}

    {% if not query %}
        <p class="text-charcoal/50 text-center py-16">{% trans "请输入关键词开始搜索" %}</p>
    {% endif %}
</section>
{% endblock %}