@props([
    'title' => '',
    'subtitle' => '',
    'showLogout' => false,
])

<nav class="navbar bg-white border-bottom px-4 py-3">

    <div class="container-fluid p-0 d-flex justify-content-between align-items-center">

        {{-- LEFT SIDE --}}
        <div class="d-flex align-items-center gap-3">

            {{-- SIDEBAR TOGGLE --}}
            <button type="button" class="btn btn-light border" onclick="toggleSidebar()" title="Toggle Sidebar">
                <i class="bi bi-list fs-4"></i>
            </button>

            {{-- PAGE TITLE --}}
            <div>

                <h5 class="mb-0 ">
                    {{ $title }}
                </h5>

                @if (!empty($subtitle))
                    <small class="text-muted">
                        {{ $subtitle }}
                    </small>
                @endif

            </div>

        </div>


        {{-- RIGHT SIDE --}}
        {{-- RIGHT SIDE --}}
        <div class="d-flex align-items-center ms-auto">

            @auth
                <div class="dropdown">

                    {{-- USER BUTTON --}}
                    <button type="button"
                        class="btn border-0 bg-transparent p-0 d-flex align-items-center gap-2 topbar-user"
                        data-bs-toggle="dropdown" aria-expanded="false">

                        <div class="topbar-user-icon">
                            <img src="{{ asset('images/user-icon.jpg') }}" alt="User" class="topbar-user-image">
                        </div>

                        <span class="topbar-username">
                            {{ Auth::user()->username }}
                        </span>

                    </button>


                    {{-- USER DROPDOWN --}}
                    <div class="dropdown-menu dropdown-menu-end user-dropdown p-0 shadow">

                        {{-- BLUE USER AREA --}}
                        <div class="user-dropdown-header text-center">

                            <div class="user-dropdown-avatar">
                                <img src="{{ asset('images/user-icon.jpg') }}" alt="User">
                            </div>

                            <div class="user-dropdown-name">
                                {{ Auth::user()->username }}
                            </div>
                            {{-- 
                            <div class="user-dropdown-role">
                                {{ Auth::user()->getRoleNames()->first() ?? 'USER' }}
                            </div> --}}

                        </div>


                        {{-- BUTTON AREA --}}
                        <div class="user-dropdown-body">

                            <a href="#" class="btn btn-light w-100 mb-2">
                                Change Password
                            </a>

                            <button type="button" class="btn btn-danger w-100" wire:click="logout">
                                Log Out
                            </button>

                        </div>

                    </div>

                </div>
            @endauth

        </div>


    </div>

</nav>

<style>
    .topbar-user-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .topbar-user-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .topbar-user {
        white-space: nowrap;
    }

    .topbar-username {
        font-size: 20px;
        color: #495057;
    }

    <style>.topbar-user {
        cursor: pointer;
        white-space: nowrap;
    }

    .topbar-user-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid #adb5bd;
    }

    .topbar-user-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .topbar-username {
        font-size: 20px;
        color: #343a40;
    }


    /* USER DROPDOWN */
    .user-dropdown {
        width: 280px;
        border: 1px solid #dee2e6;
        border-radius: 2px;
        overflow: hidden;
        margin-top: 8px !important;
    }

    .user-dropdown-header {
        background: #0d6efd;
        color: #ffffff;
        padding: 12px 20px 18px;
    }

    .user-dropdown-avatar {
        width: 86px;
        height: 86px;
        margin: 0 auto 8px;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #6c757d;
        background: #ffffff;
    }

    .user-dropdown-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-dropdown-name {
        font-size: 20px;
        font-weight: 400;
    }

    .user-dropdown-role {
        font-size: 12px;
        text-transform: uppercase;
    }

    .user-dropdown-body {
        padding: 10px;
        background: #ffffff;
    }

    .user-dropdown-body .btn {
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
</style>