<div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary text-center">
    <div class="container-fluid">
        <!-- Collapsed navigation -->
        <div class="navbar-header">
            {%- if nav|length>1 or (page and (page.next_page or page.previous_page)) or config.repo_url %}
            <!-- Expander button -->
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            {%- endif %}
        </div>

        <!-- Expanded navigation -->
        <div id="navbar-collapse" class="navbar-collapse collapse">
            {%- block site_nav %}
            {%- if nav|length>1 %}
                <!-- Main navigation -->
                <ul class="nav navbar-nav">
                {%- for nav_item in nav %}
                {%- if nav_item.children %}
                    <li class="dropdown{% if nav_item.active %} active{% endif %}">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">{{ nav_item.title }} <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                        {%- for nav_item in nav_item.children %}
                            {% include "nav-sub.html" %}
                        {%- endfor %}
                        </ul>
                    </li>
                {%- else %}
                    <li class="navitem{% if nav_item.active %} active{% endif %}">
                        <a href="{{ nav_item.url|url }}" class="nav-link">{{ nav_item.title }}</a>
                    </li>
                {%- endif %}
                {%- endfor %}
                </ul>
            {%- endif %}
            {%- endblock %}

            <ul class="nav navbar-nav ml-auto">
                {%- block search_button %}
                <li class="nav-item">
                    <a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
                        <i class="fa-solid fa-magnifying-glass"></i> <u>S</u>earch
                    </a>
                </li>
                {%- endblock %}

                {%- block repo %}
                {%- if page and page.edit_url %}
                    <li class="nav-item">
                        <a rel="edit" href="{{ page.edit_url }}" class="nav-link">
                            {%- if config.repo_name == 'GitHub' -%}
                                <i class="fa-brands fa-github"></i> <u>E</u>dit on {{ config.repo_name }}
                            {%- elif config.repo_name == 'Bitbucket' -%}
                                <i class="fa-brands fa-bitbucket"></i> <u>E</u>dit on {{ config.repo_name }}
                            {%- elif config.repo_name == 'GitLab' -%}
                                <i class="fa fa-gitlab"></i> <u>E</u>dit on {{ config.repo_name }}
                            {%- else -%}
                            <u>E</u>dit on {{ config.repo_name }}
                            {%- endif -%}
                        </a>
                    </li>
                {%- elif config.repo_url %}
                    <li class="nav-item">
                        <a rel="edit" href="{{ config.repo_url }}" class="nav-link">
                            {%- if config.repo_name == 'GitHub' -%}
                                <i class="fa-brands fa-github"></i> {{ config.repo_name }}
                            {%- elif config.repo_name == 'Bitbucket' -%}
                                <i class="fa-brands fa-bitbucket"></i> {{ config.repo_name }}
                            {%- elif config.repo_name == 'GitLab' -%}
                                <i class="fa-brands fa-gitlab"></i> {{ config.repo_name }}
                            {%- else -%}
                            {{ config.repo_name }}
                            {%- endif -%}
                        </a>
                    </li>
                {%- endif %}
                {%- endblock %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    More <i class="fa-solid fa-circle-chevron-down"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item no-arrow-link" href="https://github.com/eclipse/sumo/issues">Report a Bug / Issue / Typo</a>
                    <a class="dropdown-item" href="{{ 'Editing_Articles.html'|url }}">Help on editing articles</a>
                    <a class="dropdown-item" href="https://github.com/eclipse/sumo/commits/main/docs/web">Recent documentation changes</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#mkdocs_keyboard_modal">Keyboard Shortcuts</a>
                    <a class="dropdown-item no-arrow-link" href="https://sumo.dlr.de/sumo_documentation.zip">Download the Documentation</a>
                    <span class="dropdown-item" id="dark-mode-div">Dark mode <label id="theme-switch" class="theme-switch" for="checkbox_theme">
                        <input type="checkbox" id="checkbox_theme">
                    </label></span>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="languagedrop" data-toggle="dropdown">
                    <i class="fa-solid fa-language"></i> Languages <i class="fa-solid fa-circle-chevron-down"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                    <span class="dropdown-item">
                        Translations are generated automatically by Google Translate:
                    </span>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=de">Deutsch</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=es">Español</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=pt">Português</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=fr">Français</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=it">Italiano</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=zh-CN">简体中文</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=zh-TW">繁體中文</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=tr">Türkçe</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=ja">日本語</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=en&_x_tr_tl=ko">한국어</a>
                    <a class="dropdown-item" href="https://sumo-dlr-de.translate.goog/docs/{{page.url}}?_x_tr_sl=auto&_x_tr_tl=en"><i class="fa-solid fa-arrow-right"></i> Other languages</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>