<template>
    <header>
        <b-nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-top">
<!--         <nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-top {{ is_granted('ROLE_PREVIOUS_ADMIN') ? 'bg-warning' : 'bg-dark' }}"> -->

        <!-- <a class="navbar-brand" href=" {{ path('app_main') }} -->
<!--            <a class="navbar-brand" href="{{ path('app_main') }}"> -->
<!--                <img src="{{ asset('build/images/24unix/24_logo_bg_64x64.png') }}" alt="24unix.net" id="site-logo"> -->
<!--            </a> -->

            <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#CollapsingNavbar">
                &#9776;
            </button>

            <div class="collapse navbar-collapse" id="CollapsingNavbar">
                <ul class="navbar-nav ms-auto">
                    {% if is_granted('ROLE_PREVIOUS_ADMIN') %}
                    <li class="align-bottom">
<!--                        <a class="dropdown-item" href="{{ path('app_main', { '_switch_user': '_exit'}) }}">Exit -->
                            <!--Impersonation</a>-->
                    </li>
                    {% endif %}
                    <!--
                    <li>
                        <form class="d-flex">
                            <input class="form-control me-2 my-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn" type="submit">Search</button>
                        </form>
                    </li>
                    -->
                    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                    <li class="nav-item dropdown me-auto">
                        <button type="button" id="navbar-dropdown" data-bs-target="#dropdown-menu"
                                data-bs-toggle="dropdown"
                                class="btn btn-primary dropdown-toggle ml-auto mb-2 button-login">
                                <span v-if="user">
                                    {{ user.username }}
                                </span>
                        </button>

                        <div class="dropdown-menu dropdown-menu-dark dropdown-menu-end" id="dropdown-menu"
                             aria-labelledby="navbar-dropdown">
<!--                            <a class="dropdown-item" -->
                               <!-- href="{{ path('app_profile_edit', { 'username': app.user.username }) }}"> -->
                                <span class="fa fa-lg fa-fw fa-user" aria-hidden="true"></span>
                                <!--Profile</a>-->
                            <a class="dropdown-item" href="#">
                                <span class="fa fa-lg fa-fw fa-wrench" aria-hidden="true"></span>
                                Settings</a>
                            <div class="dropdown-divider"></div>
                            {% if is_granted('ROLE_ADMIN') %}
<!--                            <a class="dropdown-item" href="{{ path('app_list_user') }}">
                                <span class="fa fa-lg fa-fw fa-users" aria-hidden="true"></span>
                                Users
                            </a>
                            <a class="dropdown-item" href="{{ path('admin') }}">
                                <span class="fa fa-lg fa-fw fa-cog" aria-hidden="true"></span>
                                Administration
                            </a>
                            <div class="dropdown-divider"></div>
                            {% endif %}

                            <a class="dropdown-item" href="{{ path('app_logout') }}">
                                <span class="fa fa-lg fa-fw fa-sign-out" aria-hidden="true"></span>&nbsp;
                                Logout
                            </a>-->
                        </div>
                    </li>
                    {% else %}
                    <li class="nav-item">
<!--                        <a class="btn btn-primary button-login" href="{{ path('app_login') }}" role="button"
                           id="buttonLogin">
                            <span class="fa fa-sign-in fa-lg fa-fw" aria-hidden="true"></span>Log In
                        </a>-->
                    </li>
                    {% endif %}
                </ul>
            </div>
        </b-nav>
    </header>
</template>

<script>
export default {
    name: 'Header',
    props: ['user']
}
</script>