<header class="navbar navbar-expand-lg navbar-dark" style="background-color: var(--header-bg);">
    <div class="container-fluid">
        <a class="navbar-brand" href="?page={{default_page}}&lang={{current_lang}}">
            <img src="/assets/icon.svg" alt="CodePress Logo" width="32" height="32" class="me-2">
            {{site_title}}
        </a>
        
        <!-- Desktop search and language -->
        <div class="d-none d-lg-flex ms-auto align-items-center">
            <form class="d-flex me-3" method="GET" action="">
                <input class="form-control me-2 search-input" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
                <button class="btn btn-outline-light" type="submit">{{t_search_button}}</button>
            </form>
            
            <!-- Language switcher -->
            <div class="dropdown">
                <button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown">
                    {{current_lang_upper}} <i class="bi bi-chevron-down"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    {{#available_langs}}
                    <li><a class="dropdown-item {{#is_current}}active{{/is_current}}" href="?lang={{code}}{{lang_switch_url}}">{{native_name}}</a></li>
                    {{/available_langs}}
                </ul>
            </div>
        </div>
        
        <!-- Mobile search and language toggle -->
        <div class="d-lg-none">
            <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mobileSearch" aria-controls="mobileSearch" aria-expanded="false" aria-label="Toggle search">
                <i class="bi bi-search"></i>
            </button>
            <button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown">
                {{current_lang_upper}} <i class="bi bi-chevron-down"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                    {{#available_langs}}
                    <li><a class="dropdown-item {{#is_current}}active{{/is_current}}" href="?lang={{code}}{{lang_switch_url}}">{{native_name}}</a></li>
                    {{/available_langs}}
            </ul>
        </div>
    </div>
    
    <!-- Mobile search bar -->
    <div class="collapse navbar-collapse d-lg-none" id="mobileSearch">
        <div class="container-fluid px-0">
            <form class="d-flex px-3 pb-3" method="GET" action="">
                <input class="form-control me-2 search-input" type="search" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}">
                <button class="btn btn-outline-light" type="submit">{{t_search_button}}</button>
            </form>
        </div>
    </div>
</header>