{% load i18n %}

<nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-%e8%8f%9c%e5%8d%95-container">
        <ul id="menu-%e8%8f%9c%e5%8d%95" class="nav-menu">
            <li id="menu-item-3498"
                class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3498">
                <a href="/">{% trans 'index' %}</a></li>

            {% load blog_tags %}
            {% query nav_category_list parent_category=None as root_categorys %}
            {% for node in root_categorys %}
                {% include 'share_layout/nav_node.html' %}
            {% endfor %}
            {% if nav_pages %}
                {% for node in nav_pages %}

                    <li id="menu-item-{{ node.pk }}"
                        class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-{{ node.pk }}">
                        <a href="{{ node.get_absolute_url }}">{{ node.title }}</a>
                    </li>
                {% endfor %}
            {% endif %}
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children">

                <a href="{% url "blog:archives" %}">{% trans 'Article archive' %}</a>
            </li>
            <li class="menu-item menu-item-search">
                <div class="nav-search-form">
                    <form method="get" action="{% url 'search' %}">
                        <div class="search-container">
                            <input type="text" name="q" class="search-input" 
                                   placeholder="{% trans 'Search articles...' %}" 
                                   value="{{ request.GET.q|default:'' }}"
                                   aria-label="{% trans 'Search' %}">
                            <button type="submit" class="search-button" title="{% trans 'Search' %}">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </li>
        </ul>
    </div>
</nav><!-- #site-navigation -->
<style>
.menu-item-search {
    margin-left: auto;
    padding: 0 10px;
}

.nav-search-form {
    display: flex;
    align-items: center;
    height: 100%;
}

.search-container {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.search-input {
    border: none;
    background: transparent;
    padding: 8px 12px;
    outline: none;
    width: 150px;
    font-size: 14px;
    color: #333;
}

.search-input::placeholder {
    color: #888;
}

.search-button {
    border: none;
    background: transparent;
    padding: 8px 10px 8px 5px;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
}

.search-button:hover {
    color: #0073aa;
}

.search-container:focus-within {
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
    background: #fff;
}

/* 响应式设计 - 移动设备适配 */
@media (max-width: 768px) {
    .menu-item-search {
        order: 100; /* 确保在移动设备上显示在最后 */
        width: 100%;
        padding: 10px 0;
        margin-left: 0;
        border-top: 1px solid #eee;
    }
    
    .search-container {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .search-input {
        width: 100%;
        flex: 1;
    }
    
    .nav-menu {
        flex-wrap: wrap;
    }
}

/* 桌面端的大屏幕适配 */
@media (min-width: 1024px) {
    .search-input {
        width: 180px;
    }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
    .search-input {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    .search-container {
        border-radius: 25px;
    }
}
</style>