<header>
    <nav class="navbar navbar-dark bg-primary navbar-expand-md">
        <div class="container-xxl">

            <div class="col-4">
                <a class="navbar-brand" href="{{ path('chill_main_homepage') }}">
                    {{ include('@ChillMain/Layout/_header-logo.html.twig') }}
                </a>
            </div>

            <div class="col-8">

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

                <div id="navbarContent" class="collapse navbar-collapse bg-primary">
                    <ul class="navbar-nav mr-auto">

                        {% block navigation_search_bar %}
                            <li class="nav-item navigation-search">
                                <form class="form-inline" action="{{ path('chill_main_search') }}" method="get">
                                    <input class="form-control"
                                        name="q" type="search" placeholder="{{ 'Search'|trans }}"
                                        {% if _search_pattern is defined %}value="{{ _search_pattern }}"{% endif %}/>
                                        <button class="btn text-white-50" type="submit">
                                            <i class="fa fa-lg fa-search fa-flip-horizontal"></i>
                                        </button>
                                </form>
                            </li>
                        {% endblock  %}

                        {% block navigation_section_menu %}
                            {{ chill_menu('section', {
                                'layout': '@ChillMain/Menu/section.html.twig',
                            }) }}
                        {% endblock %}

                        {{ chill_menu('user', {
                            'layout': '@ChillMain/Menu/user.html.twig',
                        }) }}

                        {% if  available_languages|length == 1 %}
                            <li class="nav-item btn btn-primary nav-language">
                                <a id="menu-languages" class="nav-link" href="#">
                                    {{ available_languages[0] | capitalize }}
                                </a>
                            </li>
                        {% else %}
                            <li class="nav-item dropdown btn btn-primary nav-language">
                                <a id="menu-languages"
                                    class="nav-link dropdown-toggle"
                                    type="button"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false">
                                    {{ app.request.locale | capitalize }}
                                </a>
                                <div class="dropdown-menu dropdown-menu-end"
                                    aria-labelledby="menu-languages">
                                    {% for lang in available_languages  %}
                                        <a class="dropdown-item list-group-item bg-dark text-white{% if lang == app.request.locale %} active{% endif %}"
                                            href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale' : lang})) }}">
                                            {{ lang | capitalize }}
                                        </a>
                                    {% endfor %}
                                </div>
                            </li>
                        {% endif %}

                    </ul>
                </div>

            </div>
        </div>
    </nav>
</header>
