<nav class="navbar navbar-expand-md navbar-dark bg-dark" style="z-index: 1;">
    <div class="container-fluid">
        <a title="Snips" class="navbar-brand" href="{{ path('home') }}">
            <img src="/snips.png" width="30" height="30" class="d-inline-block align-top rounded" alt="">
            SNIPS
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="navbar-nav me-auto mb-2 mb-md-0">
                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('snip_index') }}">My snips</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('snip_new') }}">New snip</a>
                    </li>
                {% endif %}
                <li class="nav-item">
                    <a class="nav-link" href="{{ path('snip_public') }}">Public snips</a>
                </li>
            </ul>
            <ul class="navbar-nav my-2 my-lg-0">
                {% if app.environment == 'dev' %}
                    <li class="nav-item">
                        <a class="btn navbar-text bg-danger" href="#">dev</a> &nbsp;
                    </li>
                {% endif %}
                {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                    <span class="nav-item navbar-text mr-sm-2">Logged in as</span>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('user_profile') }}">{{ app.user.username }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('logout') }}">Logout</a>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('login') }}">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('register') }}">Register</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>