<header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ path('app_home') }}" title="{{ long_title[app.request.locale] }} {{ versionGetter.getVersion() }}">
                <img src="{{ asset('images/logo.svg') }}" alt="{{ title[app.request.locale] }}" width="30" height="24">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="{{ 'button.toggle_navigation'|trans }}">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    {% for item in menu.header %}
                    <li class="nav-item">
                        <a {% if app.request.attributes.get('_route') == item.route %}class="nav-link active"  aria-current="page"{% else %}class="nav-link"{% endif %} href="{{ path(item.route) }}">{{ item.icon|raw }} {{ item.label[app.request.locale] }}</a>
                    </li>
                    {% endfor %}
                    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                    {% if app.user.lockedTasks is not empty %}
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-task" viewBox="0 0 16 16">
                              <path fill-rule="evenodd" d="M2 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5zM3 3H2v1h1z"/>
                              <path d="M5 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M5.5 7a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 4a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z"/>
                              <path fill-rule="evenodd" d="M1.5 7a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5zM2 7h1v1H2zm0 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm1 .5H2v1h1z"/>
                          </svg>
                          Tâches
                      </a>
                      <ul class="dropdown-menu">
                          {% for lockedTask in app.user.lockedTasks %}
                          <li><a class="dropdown-item" href="{{ path('app_task_show', {'slug': lockedTask.slug}) }}">{{ lockedTask.project.name }} / {{ lockedTask.name }}</a></li>
                          {% endfor %}
                      </ul>
                    </li>
                    {% endif %}
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
                        </svg>
                        {{ app.user.username }}
                      </a>
                      <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="{{ 'https://osm.org/user/' ~ app.user.username }}" target="_blank">{{ 'menu.on_osm'|trans }}</a></li>
                          <li><a class="dropdown-item" href="{{ path('app_osm_logout') }}">{{ 'menu.logout'|trans }}</a></li>
                      </ul>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('app_osm_request') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
                            </svg>
                            {{ 'menu.login'|trans }}
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
	<div class="d-flex">
	    <div class="btn-group me-3">
	    	{% for locale in locales %}
	        <a href="{{ path('app_locale', {'locale': locale}) }}" class="btn btn-light{% if app.request.locale == locale %} active{% endif %}">{{ locale }}</a>
		{% endfor %}
	    </div>
        </div>
    </nav>
</header>
