{% extends 'share_layout/base.html' %}
{% load blog_tags %}
{% load static %}

{% block header %}
    <title>{% if query %}搜索 "{{ query }}" - {% endif %}{{ SITE_NAME }}</title>
    <meta name="description" content="搜索{{ SITE_NAME }}的文章内容"/>
    <meta name="keywords" content="搜索,{{ SITE_KEYWORDS }}"/>
    <meta property="og:type" content="blog"/>
    <meta property="og:title" content="搜索 - {{ SITE_NAME }}"/>
    <meta property="og:description" content="搜索{{ SITE_DESCRIPTION }}"/>
    <meta property="og:url" content="{{ SITE_BASE_URL }}/search/"/>
    <meta property="og:site_name" content="{{ SITE_NAME }}"/>
{% endblock %}

{% block content %}
    <div id="primary" class="site-content">
        <div id="content" role="main">
            <!-- 搜索框 -->
            <div class="search-box-container" style="margin-bottom: 30px;">
                <form method="get" action="{% url 'search' %}" class="search-form">
                    <div class="search-input-group">
                        <input type="text" name="q" class="search-input" 
                               placeholder="输入关键词搜索文章..." 
                               value="{{ query|default:'' }}"
                               aria-label="搜索">
                        <button type="submit" class="search-button">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>

            {% if query %}
                <header class="archive-header">
                    <h2 class="archive-title">
                        搜索：<span style="color: red">"{{ query }}"</span> 
                        {% if results_count %}
                            <span style="font-size: 0.8em; color: #666; margin-left: 15px;">
                                找到 {{ results_count }} 条结果
                            </span>
                        {% endif %}
                    </h2>
                </header><!-- .archive-header -->
            {% endif %}

            {% if query and results %}
                <!-- 显示搜索结果 -->
                {% for article in results %}
                    {% load_article_detail article True user %}
                {% endfor %}

                <!-- 分页导航 -->
                {% if page_obj.has_previous or page_obj.has_next %}
                    <nav id="nav-below" class="navigation" role="navigation">
                        <h3 class="assistive-text">文章导航</h3>
                        {% if page_obj.has_previous %}
                            <div class="nav-previous">
                                <a href="?q={{ query }}&amp;page={{ page_obj.previous_page_number }}">
                                    <span class="meta-nav">&larr;</span> 上一页
                                </a>
                            </div>
                        {% endif %}
                        
                        <span class="page-numbers" style="margin: 0 15px;">
                            第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页
                        </span>
                        
                        {% if page_obj.has_next %}
                            <div class="nav-next">
                                <a href="?q={{ query }}&amp;page={{ page_obj.next_page_number }}">
                                    下一页 <span class="meta-nav">&rarr;</span>
                                </a>
                            </div>
                        {% endif %}
                    </nav><!-- .navigation -->
                {% endif %}

            {% else %}
                <!-- 无结果时的显示 -->
                {% if query %}
                    <header class="archive-header">
                        <h1 class="archive-title">
                            哎呀，关键字：<span style="color: red">{{ query }}</span>没有找到结果，要不换个词再试试？
                        </h1>
                        <div class="search-suggestions" style="margin-top: 20px;">
                            <p>搜索建议：</p>
                            <div class="suggestion-tags">
                                <a href="?q=Django" class="tag">Django</a>
                                <a href="?q=Python" class="tag">Python</a>
                                <a href="?q=Web开发" class="tag">Web开发</a>
                                <a href="?q=数据库" class="tag">数据库</a>
                            </div>
                        </div>
                    </header>
                {% else %}
                    <header class="archive-header">
                        <h1 class="archive-title">欢迎使用搜索功能</h1>
                        <p>请在搜索框中输入关键词来查找您感兴趣的文章。</p>
                    </header>
                {% endif %}
            {% endif %}
        </div><!-- #content -->
    </div><!-- #primary -->
{% endblock %}

{% block sidebar %}
    {% load_sidebar request.user 'i' %}
{% endblock %}

{% block extra_css %}
<style>
.search-box-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.search-form {
    margin: 0;
}

.search-input-group {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #007bff;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
    outline: none;
}

.search-button {
    padding: 12px 20px;
    background: #007bff;
    color: white;
    border: 2px solid #007bff;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

.search-button:hover {
    background: #0056b3;
    border-color: #0056b3;
}

.search-suggestions {
    text-align: center;
}

.suggestion-tags {
    margin-top: 10px;
}

.tag {
    display: inline-block;
    margin: 5px;
    padding: 8px 15px;
    background: #e9ecef;
    color: #495057;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #007bff;
    color: white;
    text-decoration: none;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.nav-previous, .nav-next {
    margin: 0 10px;
}

.nav-previous a, .nav-next a {
    padding: 10px 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    text-decoration: none;
    color: #495057;
    transition: all 0.3s ease;
}

.nav-previous a:hover, .nav-next a:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.page-numbers {
    color: #6c757d;
    font-size: 14px;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 搜索框获得焦点时的事件
    const searchInput = document.querySelector('.search-input');
    if (searchInput) {
        searchInput.addEventListener('focus', function() {
            this.parentElement.style.boxShadow = '0 0 10px rgba(0, 123, 255, 0.3)';
        });
        
        searchInput.addEventListener('blur', function() {
            this.parentElement.style.boxShadow = 'none';
        });
    }
});
</script>
{% endblock %}