{% load wagtailcore_tags %}

<header class="header">
    <a href="#content" class="visually-hidden visually-hidden-focusable">Skip to main content</a>
    <nav
        class="navbar navbar-expand-lg"
        aria-label="Main"
    >
        <div class="container position-relative">
            <button
                class="navbar-toggler navbar-toggler-light"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon text-dark"></span>
            </button>
            <!-- Mobile search -->
            <button
                class="btn btn-link nav-link text-dark ms-3 me-auto d-lg-none"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSearch"
                aria-controls="navbarSearch"
                aria-expanded="false"
                aria-label="Toggle search bar"
            >
                <i class="bi bi-search"></i>
                Search
            </button>

            <div class="navbar-brand header__logo-container">
                <a class="text-light" href="{{ HOME.url }}">
                    <img
                        class="header__logo"
                        src="https://static.ietf.org/logos/ietf.svg"
                        alt="IETF logo"
                    />
                </a>
            </div>
            <div
                class="collapse navbar-collapse flex-wrap-reverse"
                id="navbarSupportedContent"
            >
                {% include "includes/megamenu.html" %}

                <ul class="navbar-nav col-xl-auto">
                    {% for item in SECONDARY_MENU %}

                    <li
                        class="
                            nav-item
                            {% if item.is_dropdown %}btn-group dropdown dropdown-hover{% endif %}
                        "
                    >
                        <a
                            class="
                                nav-link btn text-dark
                                {% if item.is_dropdown %}pe-1{% endif %}
                            "
                            href="{% pageurl item.page %}"
                        >{{item.title}}</a>

                        {% if item.is_dropdown %}
                        <button
                            class="nav-link btn text-dark dropdown-toggle d-none d-lg-block ps-1 no-js-hide"
                            id="{{ item.pk }} Dropdown"
                            data-bs-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                            aria-label="Toggle dropdown for tools"
                            title="Toggle dropdown for tools"
                            {{ item.pk }}
                        ></button>

                        <ul class="dropdown-menu dropdown-menu-right">
                            {% for sub_menu in item.sub_menu_items.all %}
                                <li class="dropdown-item position-relative">
                                    <a class="text-dark stretched-link" href="{{ sub_menu.url}}">{{ sub_menu.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                        {% endif %}

                    </li>
                    {% endfor %}
                    <li class="nav-item d-none d-lg-inline-block">
                        <a
                            href="/search"
                            class="btn text-dark nav-link"
                            role="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#navbarSearch"
                            aria-controls="navbarSearch"
                            aria-expanded="false"
                            aria-label="Toggle search bar"
                        >
                            <i class="bi bi-search"></i>
                            Search
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="collapse" id="navbarSearch">
        <div class="container">
            <div class="row justify-content-center">
                <form
                    class="input-group mt-3 mb-3 col-md-8 col-lg-6"
                    action="{% url 'search' %}"
                    method="get"
                    name="search"
                >
                    <input
                        id="search"
                        type="search"
                        class="form-control"
                        placeholder="Search"
                        aria-label="Search"
                        name="query"
                        required
                    />
                    <button type="submit" class="btn btn-primary" aria-label="Submit website search">Go</button>
                </form>
            </div>
        </div>
    </div>
</header>