{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <div>
        <h1>全局搜索</h1>
        <p class="muted">按名称或备注搜索箱子、物品和子物品，快速定位它们所在的位置。</p>
    </div>
</div>

<section class="card">
    <form method="get" action="/search" class="search-form">
        <input
            type="search"
            name="q"
            value="{{ query }}"
            placeholder="例如：锅、电源线、冬衣、文件袋"
        >
        <button type="submit">搜索</button>
    </form>
</section>

{% if searched %}
    {% if results %}
    <section class="stack">
        <p class="muted">共找到 {{ results|length }} 条结果。</p>
        {% for result in results %}
        <article class="card search-result">
            {% if result.image_url %}
            <img src="{{ result.image_url }}" alt="{{ result.name }}" class="thumb-image">
            {% endif %}
            <div class="result-body">
                <p class="meta">类型：{{ result.type }}</p>
                <h2>{{ result.name }}</h2>
                <p><strong>定位：</strong>{{ result.path }}</p>
                {% if result.type == "Item" and result.is_container %}
                <p><strong>容器：</strong>是</p>
                {% endif %}
                {% if result.note %}
                <p><strong>备注：</strong>{{ result.note }}</p>
                {% endif %}
                <div class="actions">
                    <a href="{{ result.detail_url }}">{{ result.detail_label }}</a>
                    {% if result.secondary_url %}
                    <a href="{{ result.secondary_url }}">{{ result.secondary_label }}</a>
                    {% endif %}
                </div>
            </div>
        </article>
        {% endfor %}
    </section>
    {% else %}
    <section class="card">
        <p>没有找到匹配结果。</p>
    </section>
    {% endif %}
{% else %}
<section class="card">
    <p>输入关键词后，可以跨 Box、Item、SubItem 进行搜索。</p>
</section>
{% endif %}
{% endblock %}