{% if hasTopBar is defined and hasTopBar is same as (true) %}
    {% include '@bf-components/navigation-header/twig/top-bar.twig' with {
        items                   : topBar.items|default([]),
        secondaryItems          : topBar.secondaryItems|default([]),
        isConnected             : isConnected|default(false),
        accountHello            : accountHello|default('Hello'),
        accountName             : accountName|default(''),
        hrefLogOut              : hrefLogOut|default('#'),
        labelLogOut             : labelLogOut|default('Logout'),
        hrefConnexion           : hrefConnexion|default('#'),
        labelConnexion          : labelConnexion|default('My Customer Centre'),
        reversed                : reversed|default(false),
    } only %}
{% endif %}

<header
    role='banner'
    class='bf-header z-index-18
           {% if reversed is defined and reversed is same as (true) %}reversed{% endif %}'
    {% if theme is defined %} data-theme={{theme}} {% endif %}
>
    <nav class='bf-header__nav w-100 border-bottom bf-border-color-secondary {{ class|default('') }}'>

        <!-- Logo -->
        <div class='bf-header__logo'>
            <a href='{{ logo.href|default('#') }}' class='d-flex'>
                {% include '@bf-components/logo/twig/index.twig' with {
                    name        : logo.name,
                    size        : 'large',
                    langcode    : langcode|default('EN'),
                } only %}
            </a>
        </div>

        <!-- Main Nav -->
        <div class='bf-header__nav-main js-collapse-full-height'>
            <ul class='bf-megamenu d-flex list h-100'>
                {% block navbar_content %}
                    {% include '@bf-components/navigation-header/twig/mega-menu.twig' with {
                        navItems    : navItems,
                        reversed    : reversed
                    } only %}
                {% endblock %}
            </ul>
        </div>

        <!-- Actions -->
        <div class='bf-header__actions d-flex align-items-center justify-content-end w-100 h-100 pr-3'>

            <div class='d-flex d-lg-none align-items-center'>
                {% for link in rigthIconLinks|default([])|slice(0, 5) %}
                    {% if link is defined and link.href is not empty and link.icon is not empty %}
                        {% include '@bf-components/button-icon/twig/index.twig' with {
                            href    : link.href,
                            icon    : link.icon,
                            class   : link.class
                        } only %}
                    {% endif %}
                {% endfor %}

                <!-- Btn account dropdown -->
                {% if hasAccountBtn is defined and hasAccountBtn is same as (true) %}
                    {% if isConnected is same as (true) %}
                        {% include '@bf-components/button-icon/twig/index.twig' with {
                            href        : hrefLogOut|default('#'),
                            icon        : 'logout',
                            ariaLabel   : labelLogOut|default('Log out'),
                        } %}
                    {% else %}
                        {% include '@bf-components/button-icon/twig/index.twig' with {
                            href        : hrefConnexion|default('#'),
                            icon        : 'my-account',
                            ariaLabel   : labelConnexion|default('Log in'),
                        } %}
                    {% endif %}
                {% endif %}

                <!-- Btn mini cart -->
                {# {% if hasMiniCartBtn is defined and hasMiniCartBtn is same as (true) %}
                    {% include '@bf-components/navigation-header/twig/btn-minicart.twig' with { class:'' } only %}
                {% endif %} #}

                <!-- Btn search toggle -->
                {% include '@bf-components/button-icon/twig/index.twig' with {
                    icon            : 'search',
                    dataToggle      : 'collapse',
                    dataTarget      : '#navbarSearch',
                    ariaControls    : 'navbarSearch',
                    ariaExpanded    : 'false',
                    class           : 'd-flex d-md-none js-bf-search-toggler'
                } only %}
            </div>

            <!-- Search -->
            {% if hasNoSearchBtn is not defined or hasNoSearchBtn is same as (false) %}
                <div class='bf-header__search-bar js-bf-header__search-bar d-none d-md-block ml-1' id='navbarSearch'>
                    <div class='d-flex align-items-center justify-content-between w-100'>
                        {% block globalSearch %}
                            {% include '@bf-components/input-search/twig/index.twig' with {
                                class       : 'mb-0',
                                input       : {
                                    placeholder     : search.placeholder|default('')|t,
                                },
                                reversed    : reversed,
                            } %}
                        {% endblock %}
                            {% include '@bf-components/button-icon/twig/index.twig' with {
                                icon            : 'x',
                                dataToggle      : 'collapse',
                                dataTarget      : '#navbarSearch',
                                ariaControls    : 'navbarSearch',
                                ariaExpanded    : 'false',
                                class           : 'd-flex d-md-none m-1 p-1'
                            } %}
                    </div>
                </div>
            {% endif %}

        </div>

    </nav>

    {% if hasNoSearchBtn is not defined or hasNoSearchBtn is same as (false) %}
        <div class='align-items-center justify-content-between w-100'>
            <div id='alg-hits' class='ais-Hits bf-color-bg-ground alg-hidden'></div>
        </div>
    {% endif %}

</header>