{include:head.html}
{include:header.html}

<!-- ===== 搜索区域 ===== -->
<div class="search-page">
    <div class="container">
        <!-- 搜索表单 -->
        <div class="search-form-wrap">
            <form class="search-form" action="/search/" method="get" onsubmit="return searchPageSubmit(this)">
                <input type="text" name="keyword" class="search-input" value="{var:keyword}" placeholder="请输入关键词..." required>
                <select name="scope" class="search-scope" aria-label="搜索范围">
                    {raw:scopeOptions}
                </select>
                <button type="submit" class="search-btn">搜索</button>
            </form>
        </div>

        <!-- Tab 导航 -->
        <div class="search-tabs">
            {raw:tabHtml}
        </div>

        <!-- 标签匹配建议 -->
        {raw:tagMatchHtml}

        <!-- 结果列表 -->
        <div class="search-results">
            {raw:resultHtml}
        </div>
    </div>
</div>

<style>
.search-page { padding: 24px 0 40px; background: #f8f9fa; min-height: 60vh; }
.search-page .container { max-width: 960px; }

.search-form-wrap { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 20px; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-input { flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; outline: none; transition: border-color .2s; }
.search-input:focus { border-color: #4A6CF7; }
.search-scope { padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; outline: none; }
.search-scope:focus { border-color: #4A6CF7; }
.search-btn { padding: 10px 22px; border: none; border-radius: 6px; background: #4A6CF7; color: #fff; font-size: 15px; cursor: pointer; transition: opacity .2s; }
.search-btn:hover { opacity: 0.88; }

.search-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.search-tab { padding: 8px 18px; border-radius: 20px; background: #fff; color: #666; text-decoration: none; font-size: 14px; border: 1px solid #e8e8e8; transition: all .2s; }
.search-tab:hover { border-color: #4A6CF7; color: #4A6CF7; }
.search-tab.active { background: #4A6CF7; color: #fff; border-color: #4A6CF7; }

.search-tag-match { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 16px; background: #f0f7ff; border-radius: 8px; flex-wrap: wrap; }
.tag-match-label { font-size: 13px; color: #666; flex-shrink: 0; }
.tag-match-links { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-match-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 14px; background: #fff; color: #4A6CF7; text-decoration: none; font-size: 13px; border: 1px solid #d6e4ff; transition: all .2s; }
.tag-match-link:hover { background: #4A6CF7; color: #fff; border-color: #4A6CF7; }
.tag-match-count { font-size: 11px; color: #999; background: #f5f5f5; padding: 0 6px; border-radius: 8px; line-height: 16px; }
.tag-match-link:hover .tag-match-count { color: #4A6CF7; background: #fff; }

.search-results { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.search-item { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.search-item:last-child { border-bottom: none; }
.search-title { font-size: 16px; margin-bottom: 6px; line-height: 1.4; }
.search-title a { color: #1a73e8; text-decoration: none; }
.search-title a:hover { text-decoration: underline; }
.search-title mark { background: #fff3cd; padding: 0 2px; border-radius: 2px; }
.search-summary { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 8px; }
.search-summary mark { background: #fff3cd; padding: 0 2px; border-radius: 2px; }
.search-meta { font-size: 12px; color: #999; }
.search-meta .search-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #f0f7ff; color: #4A6CF7; margin-right: 8px; font-size: 12px; }
.search-meta a { color: #4A6CF7; }

.search-author { display: flex; gap: 14px; align-items: flex-start; }
.search-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.search-author-info { flex: 1; }

.search-empty { text-align: center; padding: 60px 20px; color: #999; font-size: 15px; }

@media (max-width: 768px) {
    .search-form { flex-wrap: wrap; }
    .search-input { min-width: 100%; }
    .search-scope { flex: 1; }
}
</style>

<script>
function searchPageSubmit(form) {
    var kw = form.keyword.value.trim();
    if (!kw) { form.keyword.focus(); return false; }
    var scope = form.scope.value;
    var url = '/search/' + encodeURIComponent(kw) + '/';
    if (scope && scope !== 'all') url += encodeURIComponent(scope) + '/';
    window.location.href = url;
    return false;
}
</script>

{include:footer.html}