<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

    <!-- Sidebar Toggle (Topbar) -->
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
        <i class="fa fa-bars"></i>
    </button>

    <!-- Topbar Navbar -->
    <ul class="navbar-nav ml-auto">

        <!-- Nav Item - Alerts -->
        <li class="nav-item dropdown no-arrow mx-1">
            <livewire:backend.notification-component />
        </li>

        <!-- Nav Item - Messages -->
{{--        <li class="nav-item dropdown no-arrow mx-1">--}}
{{--            <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"--}}
{{--               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                <i class="fas fa-envelope fa-fw"></i>--}}
{{--                <span class="badge badge-danger badge-counter">7</span>--}}
{{--            </a>--}}
{{--            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" x-data--}}
{{--                 aria-labelledby="messagesDropdown">--}}
{{--                <h6 class="dropdown-header">--}}
{{--                    Messages Center--}}
{{--                </h6>--}}
{{--                <template x-for="i in [1,10]">--}}
{{--                    <a class="dropdown-item d-flex align-items-center" href="#">--}}
{{--                        <div class="dropdown-list-image mr-3">--}}
{{--                            <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"--}}
{{--                                 alt="...">--}}
{{--                            <div class="status-indicator bg-success"></div>--}}
{{--                        </div>--}}
{{--                        <div>--}}
{{--                            <div class="text-truncate">Am I a good boy? The reason I ask is because someone--}}
{{--                                told me that people say this to all dogs, even if they aren't good...</div>--}}
{{--                            <div class="small text-gray-500">Chicken the Dog · 2w</div>--}}
{{--                        </div>--}}
{{--                    </a>--}}
{{--                </template>--}}

{{--                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>--}}
{{--            </div>--}}
{{--        </li>--}}


        <!-- Supervisor link -->
{{--        @can('access_link')--}}
{{--            <li class="nav-item">--}}
{{--                <a class="nav-link text-dark" href="{{ route('admin.links.index') }}">{{__("Links")}}</a>--}}
{{--            </li>--}}
{{--        @endcan--}}
{{--        @can('access_supervisor')--}}
{{--            <li class="nav-item">--}}
{{--                <a class="nav-link text-dark" href="{{ route('admin.supervisors.index') }}">{{__("Supervisors")}}</a>--}}
{{--            </li>--}}
{{--        @endcan--}}
        @can("setting-list")
            <li class="nav-item">
                <a class="nav-link text-underline fs-13"
                   href="{{ route('admin.settings.index') }}">
                    <strong class="text-success">
                        {{__("Settings")}}
                    </strong>
                </a>
            </li>
        @endcan

        <div class="topbar-divider d-none d-sm-block"></div>

        <!-- Nav Item - User Information -->
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                @auth("admin")
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ auth()->user()->fullName }}</span>
                @endauth
                @if(auth()->user()->avatar)
                    <img class="img-profile rounded-circle" src="{{auth()->user()->avatar }}"
                         alt="{{auth()->user()->full_name }}">
                @else
                    <img class="img-profile rounded-circle" src="{{ url('img/avatar.png') }}" alt="User avatar">
                @endif
            </a>
            <!-- Dropdown - User Information -->
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                 aria-labelledby="userDropdown">
                <a class="dropdown-item" href="{{ route('admin.account_setting') }}">
                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                    {{__("Profile")}}
                </a>

                <div class="dropdown-divider"></div>

                @auth("admin")
                    <a class="dropdown-item" href="javascript:void(0)" onclick="disconnection('{{ route('admin.auth.logout') }}')">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                       {{__("Logout")}}
                    </a>
                @endauth
            </div>
        </li>
    </ul>

</nav>
