{% load static 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 navbar-dark iab-bg-blue-3 text-light"
        aria-label="Main"
    >
        <div class="container">
            <!-- Brand Image -->
            <div class="position-relative d-flex align-items-center">
                <div class="navbar-brand iab-logo-image">
                    <a class="text-light stretched-link" href="{{ HOME.url }}">
                        <img
                            class="header__logo"
                            src="{% static 'img/iab-logo.svg' %}"
                            alt="IAB logo"
                        />
                    </a>
                </div>
                <!-- Brand Text -->
                <div class="iab-logo-text iab-navbar-text">Internet Architecture Board</div>
            </div>

            <!-- Mobile search -->
            <button
                class="btn btn-link nav-link text-light ms-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>
            <!-- Burger Menu -->
            <button
                class="navbar-toggler"
                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-light"></span>
            </button>
            <!-- Collapsing Desktop Nav -->
            <div
                class="collapse navbar-collapse justify-content-end"
                id="navbarSupportedContent"
            >
                <ul
                    class="navbar-nav align-items-center"
                >
                {% for item in MENU %}
                <li
                    class="
                        nav-item nav-item--iab dropdown-hover btn-group me-2
                        {% if item.pk == self.pk %} active{% endif %}
                    "
                >
                        <a
                            href="{{ item.url }}"
                            class="nav-link nav-link--iab btn text-white iab-navbar-text text-lg-start {% if item.subitems %} pe-1{% endif %}"
                        >
                            {{ item.title }}
                        </a>
                        {% if item.subitems %}
                        <button
                            class="btn btn--iab-dropdown-toggle text-light dropdown-toggle dropdown-toggle-split 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 {{ item.title }}"
                            title="Toggle dropdown for {{ item.title }}"
                        ></button>
                        <ul
                            class="dropdown-menu dropdown-menu-iab iab-bg-blue-2"
                            aria-labelledby="{{ item.pk }}Dropdown"
                        >
                            {% for subitem in item.subitems %}
                            <li
                                class="dropdown-item dropdown-item--iab position-relative{% if subitem.pk == self.pk %} active{% endif %}"
                            >
                                <a
                                    class="text-white stretched-link iab-navbar-text"
                                    href="{{ subitem.url }}"
                                    >{{ subitem.title }}</a
                                >
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </li>

                {% endfor %}
                <li class="nav-item nav-item--iab btn-group me-2 ">
                    <a
                        href="/search"
                        class="btn iab-navbar-text text-white nav-link nav-link--iab d-none d-lg-block"
                        role="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarSearch"
                        aria-controls="navbarSearch"
                        aria-expanded="false"
                        aria-label="Toggle search bar"
                    >
                    Search
                    <i class="bi bi-search"></i>
                    </a>
                </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="collapse iab-bg-blue-3" 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 iab-btn-secondary text-white" aria-label="Submit website search">Go</button>
                </form>
            </div>
        </div>
    </div>
</header>