{% load navigation_tags %}

<div class="header clearfix" role="banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <a href="/" class="logo">The Wagtail Bakery</a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-label="Mobile menu" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                <form action="/search" method="get" class="search" role="search">
                    <input name="q" type="text" placeholder="Search the site" aria-label="Search the site" autocomplete="off">
                    <a href="#" class="search-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"></path></svg>
                    </a>
                </form>

                {% block main_navigation %}
                    <nav class="collapse navbar-collapse" id="main-navigation" role="navigation" aria-label="Primary site navigation">
                        <ul class="nav nav-pills">
                            {# main_menu is defined in base/templatetags/navigation_tags.py #}
                            {% get_site_root as site_root %}
                            {% top_menu parent=site_root calling_page=self %}
                        </ul>
                    </nav>
                {% endblock %}
            </div>
        </div>
    </div>
</div>
