<header id="site-header" class="navbar navbar-expand-lg navbar-dark" style="background-color: transparent;">
    <div class="container-fluid">
        <a class="navbar-brand" href="/{{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="" role="search" aria-label="Site search">
                <div class="form-group">
                    <label for="desktop-search-input" class="sr-only">{{t_search_placeholder}}</label>
                    <input class="form-control me-2 search-input" type="search" id="desktop-search-input" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}" aria-describedby="search-help">
                    <div id="search-help" class="sr-only">Enter keywords to search through the documentation</div>
                </div>
                <button class="btn btn-outline-light" type="submit" aria-label="{{t_search_button}}">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <span class="sr-only">{{t_search_button}}</span>
                </button>
            </form>
            
            <!-- Language switcher -->
            <div class="dropdown">
                <button class="btn btn-outline-light" type="button" data-bs-toggle="dropdown" aria-haspopup="menu" aria-expanded="false" aria-label="Select language - currently {{current_lang_upper}}">
                    {{current_lang_upper}} <i class="bi bi-chevron-down" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" role="menu">
                    {{#available_langs}}
                    <li role="none">
                        <a class="dropdown-item {{#is_current}}active{{/is_current}}" href="/{{code}}" role="menuitem" {{#is_current}}aria-current="true"{{/is_current}} lang="{{code}}">
                            {{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" aria-haspopup="menu" aria-expanded="false" aria-label="Select language - currently {{current_lang_upper}}">
                {{current_lang_upper}} <i class="bi bi-chevron-down" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" role="menu">
                    {{#available_langs}}
                    <li role="none">
                        <a class="dropdown-item {{#is_current}}active{{/is_current}}" href="/{{code}}" role="menuitem" {{#is_current}}aria-current="true"{{/is_current}} lang="{{code}}">
                            {{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="" role="search" aria-label="Site search">
                <div class="form-group w-100">
                    <label for="mobile-search-input" class="sr-only">{{t_search_placeholder}}</label>
                    <input class="form-control me-2 search-input" type="search" id="mobile-search-input" name="search" placeholder="{{t_search_placeholder}}" value="{{search_query}}" aria-describedby="mobile-search-help">
                    <div id="mobile-search-help" class="sr-only">Enter keywords to search through the documentation</div>
                </div>
                <button class="btn btn-outline-light" type="submit" aria-label="{{t_search_button}}">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <span class="sr-only">{{t_search_button}}</span>
                </button>
            </form>
        </div>
    </div>
</header>