<header id="page-topbar">
    <div class="navbar-header">
        <div class="d-flex align-center">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <x-logo/>
            </div>

            <button type="button" class="btn btn-sm px-3 font-size-16 d-lg-none header-item waves-effect waves-light" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                <i class="mdi mdi-drag"></i>
            </button>
        </div>

        <div class="d-flex align-items-center gap-1">
            @persist('call-overlay')
            <livewire:dialler.call-overlay/>
            @endpersist
            <livewire:notification-bell/>
            <livewire:task-manager/>

            <div class="dropdown d-inline-block">
                <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img class="rounded-circle header-profile-user" src="{{ auth()->user()->profile_photo_url }}" alt="Header Avatar">
                    <span class="d-none d-xl-inline-block ms-1 fw-medium font-size-15">{{ auth()->user()->name_first }} {{ auth()->user()->name_last }}</span>
                    <i class="uil-angle-down d-none d-xl-inline-block font-size-15"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <a wire:navigate class="dropdown-item"
                       href="{{ route('account.profile') }}">
                        <span class="align-middle">Profile</span>
                    </a>
                    <a wire:navigate class="dropdown-item"
                       href="{{ route('account.security') }}">
                        <span class="align-middle">Security</span>
                    </a>
                    <a wire:navigate class="dropdown-item"
                       href="{{ route('account.sessions') }}">
                        <span class="align-middle">Sessions</span>
                    </a>
                    <a wire:navigate class="dropdown-item"
                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="mdi mdi-logout"></i>
                        <span class="align-middle">Log out</span>
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                </div>
            </div>

        </div>
    </div>
    <div class="container-fluid">
        <div class="topnav">

            <nav class="navbar navbar-light navbar-expand-lg topnav-menu">

                <div class="collapse navbar-collapse" id="topnav-menu-content">
                    <x-nav/>
                </div>
            </nav>
        </div>
    </div>
</header>