<nav class="navbar navbar-expand-lg bg-dark fixed-top" data-bs-theme="dark">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="{{ path('videotheque_liste') }}">Videothèque</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            {%  if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
            <li class="nav-item">
                <a class="nav-link 
                {% if app.request.attributes.get('_route') == 'videothequepersonnelle_maliste' %}active{% endif %}"
                href="{{ path('videothequepersonnelle_maliste') }}">Ma liste à voir</a>
            </li>
            {% endif %}
            <li class="nav-item">
                <a class="nav-link
                {% if app.request.attributes.get('_route') == 'videotheque_liste' %}active{% endif %}"
                href="{{ path('videotheque_liste') }}">Liste des films</a>
            </li>
            <li class="nav-item">
                <a class="nav-link
                {% if app.request.attributes.get('_route') == 'prochaines_sorties' %}active{% endif %}"
                href="{{ path('prochaines_sorties') }}">Prochaines sorties</a>
            </li>
            {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
            <li class="nav-item">
                <a class="nav-link
                {% if app.request.attributes.get('_route') == 'realisateur_liste' %}active{% endif %}"
                href="{{ path('realisateur_liste') }}">Réalisateurs</a>
            </li>
            {% endif %}
            {%  if is_granted('ROLE_MODERATEUR') %}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAdmin" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Administration
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    {% if is_granted('ROLE_ADMIN') %}
                        <li><a class="dropdown-item" href="{{ path('admin_index') }}">Utilisateurs</a></li>
                        <li><hr class="dropdown-divider"></li>
                    {% endif %}
                    <li><a class="dropdown-item" href="{{ path('genre_liste') }}">Liste des genres</a></li>
                </ul>
            </li>
            {%  endif %}           
            <li class="nav-item">
                <a class="nav-link
                {% if app.request.attributes.get('_route') == 'app_page_show' and app.request.attributes.get('_route_params')['name'] == 'about' %}active{% endif %}"
                href="{{path('app_page_show', {'name': 'about'}) }}">A propos</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <form class="me-auto" action="{{ path('search_recherche') }}">
                    <div class="input-group">
                        <input class="form-control mr-sm-2" name="q" type="text" placeholder="Rechercher" aria-label="Rechercher">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Go</button>
                    </div>
                </form>
            </li>
        </ul>
        
        {%  if not is_granted('IS_AUTHENTICATED_REMEMBERED') %}
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="{{ path('app_login') }}">Se connecter</a></li>
            </ul>
        {% else %}
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ app.user.nomComplet }}
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarUserDropdown">
                        <li><a class="dropdown-item" href="{{ path('user_profil') }}"><i class="fa fa-user"></i> Profil</a></li>
                        <li><a class="dropdown-item" href="{{ path('user_preferences') }}"><i class="fa fa-cog"></i> Préférences</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{{ path('app_logout') }}"><i class="fa fa-sign-out"></i> Se déconnecter</a></li>
                    </ul>
                </li>
            </ul>
        {% endif %}
    </div>
    {# Icones qui ne sont pas dans le collapse #}
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link me-3" data-bs-toggle="modal" data-bs-target="#modalWindow"><i class="fa fa-info-circle fa-lg text-light" aria-hidden="true"></i></a>
        <li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarColorDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-tint fa-lg"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarColorDropdown">
                <li><a href="#" class="dropdown-item" data-bs-theme-value="light">Light</a></li>
                <li><a href="#" class="dropdown-item" data-bs-theme-value="dark">Dark</a></li>
            </ul>
        </li>
    </ul>
    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarHelpDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-question-circle fa-lg"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end p-4" aria-labelledby="navbarHelpDropdown" style="width: 400px;">
                    <p><i class="fa fa-bookmark fa-lg text-primary"></i> : Films que l'on souhaite voir. On les retrouve dans "Liste de mes films"</p>
                    <p><i class="fa fa-eye fa-lg text-success"></i> : Film qu'on a vu</p>
                    <p><i class="fa fa-eye-slash fa-lg text-secondary"></i> : Film qu'on n'a pas vu</p>
            </div>
        </li>
    </ul>
    {% endif %}
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarBellDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-bell fa-lg"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarBellDropdown" style="width: 400px;">
                <div class="list-group px-4 py-3">
                    {{ afficheNouveautes() | raw }}
                </div>
            </div>
        </li>
    </ul>


</nav>