{% load navigation_tags %}

<header class="bg-light">
    <a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="/">{{page.get_site.site_name}}</a>

            <!-- Toggle Button -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"
                 aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Collapsed Menu -->
            <div class="collapse navbar-collapse" id="mainNavbar">
                <ul  class="navbar-nav me-auto mb-2 mb-lg-0 nav-pills">
                    {# main_menu is defined in templatetags/navigation_tags.py #}
                    {% get_site_root as site_root %}
                    {% top_menu parent=site_root calling_page=self %}
                </ul>
                <!-- Search form -->
        <form class="d-flex" action="/search" method="get" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="q">
          <button class="btn btn-outline-primary" type="submit">Search</button>
        </form>

                <!--<form action="/search" method="get" class="navigation__mobile-search" role="search">
                    <label for="mobile-search-input" class="u-sr-only">Search</label>
                    <input class="navigation__search-input" id="mobile-search-input" type="text" placeholder="Search" autocomplete="off" name="q">
                    <div aria-hidden="true" class="navigation__search-icon">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="#333" />
                        </svg>
                    </div>
                </form>-->
            </div>

            <!--<form action="/search" method="get" class="navigation__search" role="search">
                <label for="search-input" class="u-sr-only">Search</label>
                <input class="navigation__search-input" id="search-input" type="text" placeholder="Search" autocomplete="off" name="q">
                <div aria-hidden="true" class="navigation__search-icon">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C8.11 13 9.59 12.41 10.73 11.43L11 11.71V12.5L16 17.49L17.49 16L12.5 11ZM6.5 11C4.01 11 2 8.99 2 6.5C2 4.01 4.01 2 6.5 2C8.99 2 11 4.01 11 6.5C11 8.99 8.99 11 6.5 11Z" fill="#333" />
                    </svg>
                </div>
            </form>-->
        </nav>
    </div>
</header>