{% import "helper.twig" as helper %}

<nav class="navbar navbar-expand-md bg-body-tertiary border-bottom shadow-sm fixed-top py-0" id="navbar">
    <div class="container-fluid">
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#sidebar-container">
            <span class="visually-hidden">{% trans %}sidebar.toggle{% endtrans %}</span>
            <!-- <span class="navbar-toggler-icon"></span> -->
            <i class="fas fa-folder-open fa-lg fa-fw"></i>
        </button>

        <a class="navbar-brand" href="{{ path('homepage') }}"><i class="fa fa-microchip"
                                                                 aria-hidden="true"></i> {{ partdb_title }}</a>

        <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> -->
            <i class="fas fa-bars  fa-lg"></i>
        </button>


        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto">
                {% if is_granted("@tools.label_scanner") %}
                    <li class="nav-item">
                        <a class="nav-link"
                           href="{{ path("scan_dialog") }}">{% trans %}navbar.scanner.link{% endtrans %}</a>
                    </li>
                {% endif %}

                {% if is_granted("@parts.create") %}
                    {% set show_parts_create_dropdown = is_granted('@info_providers.create_parts') or is_granted('@parts.import') %}
                    <li class="nav-item dropdown">
                        <a class="nav-link d-inline-block {% if show_parts_create_dropdown %}pe-0{% endif %}"
                           href="{{ path("part_new") }}">{% trans %}tree.tools.edit.part{% endtrans %}</a>

                        {% if show_parts_create_dropdown %}
                            <a class="nav-link dropdown-toggle d-inline-block ps-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"></a>
                            <ul class="dropdown-menu">
                                {% if is_granted('@info_providers.create_parts') %}
                                    <li>
                                        <a class="dropdown-item" href="{{ path('info_providers_search') }}">
                                            <i class="fa-fw fa-solid fa-cloud-arrow-down"></i>
                                            {% trans %}info_providers.search.title{% endtrans %}
                                        </a>
                                    </li>
                                {% endif %}

                                {% if is_granted('@parts.import') %}
                                    <li><a class="dropdown-item" href="{{ path('parts_import') }}">
                                            <i class="fa-fw fa-solid fa-file-import"></i>
                                            {% trans %}parts.import.title{% endtrans %}
                                        </a></li>
                                {% endif %}
                            </ul>
                        {% endif %}
                    </li>
                {% endif %}
            </ul>

            {% if is_granted('@parts.read') %}
                {% include "_navbar_search.html.twig" %}
            {% endif %}


            <ul class="navbar-nav ms-3" id="login-content">
                <li class="nav-item dropdown">
                    <a href="#" class="dropdown-toggle link-anchor nav-link" data-bs-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false" id="navbar-user-dropdown-btn" data-bs-reference="window">
                        {% if app.user %} {# Logged in #}
                            {% if impersonation_active() %} {# Impersonated user #}
                                <i class="fa-solid fa-user-secret text-warning"></i>
                            {% else %}
                                <i class="fas fa-user" aria-hidden="true"></i>
                            {% endif %}
                        {% else %} {#  Not logged in #}
                            <i class="far fa-user" aria-hidden="true"></i>
                        {% endif %}
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-end" id="login-menu" aria-labelledby="navbar-user-dropdown-btn">
                        {% if app.user %}
                            <a class="dropdown-item disabled" href="#">{% trans %}user.loggedin.label{% endtrans %}
                                {{ helper.user_icon(app.user) }} <b>{{ app.user.firstName }} {{ app.user.lastName }}</b> (@{{ app.user.name }})</a>

                            {% if impersonation_active() %}
                                {% set impersonator = impersonator_user() %}
                                <a class="dropdown-item disabled text-warning" href="#">{% trans %}user.impersonated_by.label{% endtrans %}
                                    {{ helper.user_icon(impersonator) }} <b>{{ impersonator.firstName }} {{ impersonator.lastName }}</b> (@{{ impersonator.name }})</a>
                            {% endif %}



                            <a class="dropdown-item" href="{{ path("user_settings") }}">
                                <i class="fa fa-cogs fa-fw" aria-hidden="true"></i> {% trans %}user.settings.label{% endtrans %}
                            </a>
                            <a class="dropdown-item" href="{{ path("user_info_self") }}">
                                <i class="fa fa-info-circle fa-fw" aria-hidden="true"></i> {% trans %}user.info.label{% endtrans %}</a>
                            <li role="separator" class="dropdown-divider"></li>

                            {% if impersonation_active() %}
                                <a class="dropdown-item" href="{{ impersonation_exit_path() }}" data-turbo="false" data-turbo-frame="_top">
                                    <i class="fa fa-turn-up fa-fw" aria-hidden="true"></i> {% trans %}user.stop_impersonation{% endtrans %}
                                </a>
                            {% endif %}

                            <a class="dropdown-item" href="{{ path('logout') }}" data-turbo="false" data-turbo-frame="_top">
                                <i class="fa fa-sign-out-alt fa-fw" aria-hidden="true"></i> {% trans %}user.logout{% endtrans %}
                            </a>
                        {% else %}
                            <a class="dropdown-item"
                               href="{{ path('login', {'_target_path': app.request.pathinfo | remove_locale_from_path}) }}"
                               id="login-link"><i class="fa fa-sign-in-alt fa-fw"
                                                  aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
                        {% endif %}
                        <li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator"></li>
                        <div class="px-4 py-0 d-flex justify-content-between align-items-baseline">
                            <span class="me-2">{% trans %}ui.toggle_darkmode{% endtrans %}</span>
                            <div class="btn-group" role="group" {{ stimulus_controller('common/darkmode') }}>
                                <input type="radio" class="btn-check" name="darkmode" id="darkmode-light" autocomplete="off" value="light">
                                <label class="btn btn-outline-secondary" for="darkmode-light" title="{% trans %}ui.darkmode.light{% endtrans %}"><i class="fa-solid fa-sun"></i></label>
                                <input type="radio" class="btn-check" name="darkmode" id="darkmode-dark" autocomplete="off" value="dark">
                                <label class="btn btn-outline-secondary" for="darkmode-dark" title="{% trans %}ui.darkmode.dark{% endtrans %}"><i class="fa-solid fa-moon"></i></label>
                                <input type="radio" class="btn-check" name="darkmode" id="darkmode-auto" autocomplete="off" value="auto" checked>
                                <label class="btn btn-outline-secondary" for="darkmode-auto" title="{% trans %}ui.darkmode.auto{% endtrans %}"><i class="fa-solid fa-circle-half-stroke"></i></label>
                            </div>
                        </div>
                        <li role="separator" class="dropdown-divider"></li>
                        <h6 class="dropdown-header">{% trans %}user.language_select{% endtrans %}</h6>
                        <div id="locale-select-menu">
                            {# This menu is filled by 'turbo/locale_menu' controller from the _turbo_control.html.twig template, to always have the correct path #}
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>