{{-- User Left Navigation - Phoenix v1.22.0 Compatible --}}
<!-- Vertical Navbar - Based on Phoenix v1.22.0 exact structure -->
<nav class="navbar navbar-vertical navbar-expand-lg">
    <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
        <!-- scrollbar removed-->
        <div class="navbar-vertical-content">
            <ul class="navbar-nav flex-column" id="navbarVerticalNav">
                <!-- Dashboard Section -->
                <li class="nav-item">
                    <!-- parent pages-->
                    <div class="nav-item-wrapper">
                        <a class="nav-link dropdown-indicator label-1 {{ request()->routeIs('user.dashboard') || request()->routeIs('user.dashboard.role') ? 'active' : '' }}" href="#nv-dashboard" role="button" data-bs-toggle="collapse" aria-expanded="{{ request()->routeIs('user.dashboard') || request()->routeIs('user.dashboard.role') ? 'true' : 'false' }}" aria-controls="nv-dashboard">
                            <div class="d-flex align-items-center">
                                <div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
                                <span class="nav-link-icon"><span data-feather="pie-chart"></span></span>
                                <span class="nav-link-text">Dashboard</span>
                            </div>
                        </a>
                        <div class="parent-wrapper label-1">
                            <ul class="nav collapse parent {{ request()->routeIs('user.dashboard') || request()->routeIs('user.dashboard.role') ? 'show' : '' }}" data-bs-parent="#navbarVerticalCollapse" id="nv-dashboard">
                                <li class="collapsed-nav-item-title d-none">Dashboard</li>
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('user.dashboard') ? 'active' : '' }}" href="{{ route('user.dashboard') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">Overview</span>
                                        </div>
                                    </a>
                                </li>
                                @if(auth()->check() && auth()->user()->currentRole)
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('user.dashboard.role') ? 'active' : '' }}" href="{{ route('user.dashboard.role') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">{{ auth()->user()->currentRole->display_name }}</span>
                                        </div>
                                    </a>
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </li>
                
                <!-- Profile Section -->
                <li class="nav-item">
                    <!-- label-->
                    <p class="navbar-vertical-label">Profile</p>
                    <hr class="navbar-vertical-line" />
                    <!-- parent pages-->
                    <div class="nav-item-wrapper">
                        <a class="nav-link dropdown-indicator label-1 {{ request()->routeIs('user.profile') || request()->routeIs('user.activity') ? 'active' : '' }}" href="#nv-profile" role="button" data-bs-toggle="collapse" aria-expanded="{{ request()->routeIs('user.profile') || request()->routeIs('user.activity') ? 'true' : 'false' }}" aria-controls="nv-profile">
                            <div class="d-flex align-items-center">
                                <div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
                                <span class="nav-link-icon"><span data-feather="user"></span></span>
                                <span class="nav-link-text">Profile</span>
                            </div>
                        </a>
                        <div class="parent-wrapper label-1">
                            <ul class="nav collapse parent {{ request()->routeIs('user.profile') || request()->routeIs('user.activity') ? 'show' : '' }}" data-bs-parent="#navbarVerticalCollapse" id="nv-profile">
                                <li class="collapsed-nav-item-title d-none">Profile</li>
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('user.profile') ? 'active' : '' }}" href="{{ route('user.profile') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">Personal Info</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('user.activity') ? 'active' : '' }}" href="{{ route('user.activity') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">Activity Log</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                
                <!-- Management Section -->
                <li class="nav-item">
                    <!-- label-->
                    <p class="navbar-vertical-label">Management</p>
                    <hr class="navbar-vertical-line" />
                    <!-- parent pages-->
                    <div class="nav-item-wrapper">
                        <a class="nav-link dropdown-indicator label-1 {{ request()->routeIs('user.roles.*') ? 'active' : '' }}" href="#nv-management" role="button" data-bs-toggle="collapse" aria-expanded="{{ request()->routeIs('user.roles.*') ? 'true' : 'false' }}" aria-controls="nv-management">
                            <div class="d-flex align-items-center">
                                <div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
                                <span class="nav-link-icon"><span data-feather="users"></span></span>
                                <span class="nav-link-text">Management</span>
                            </div>
                        </a>
                        <div class="parent-wrapper label-1">
                            <ul class="nav collapse parent {{ request()->routeIs('user.roles.*') ? 'show' : '' }}" data-bs-parent="#navbarVerticalCollapse" id="nv-management">
                                <li class="collapsed-nav-item-title d-none">Management</li>
                                <li class="nav-item">
                                    <a class="nav-link {{ request()->routeIs('user.roles.*') ? 'active' : '' }}" href="{{ route('user.roles.index') }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-text">Role Management</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                
                <!-- Settings Section -->
                <li class="nav-item">
                    <!-- label-->
                    <p class="navbar-vertical-label">Settings</p>
                    <hr class="navbar-vertical-line" />
                    <!-- parent pages-->
                    <div class="nav-item-wrapper">
                        <a class="nav-link label-1 {{ request()->routeIs('user.settings') ? 'active' : '' }}" href="{{ route('user.settings') }}">
                            <div class="d-flex align-items-center">
                                <span class="nav-link-icon"><span data-feather="settings"></span></span>
                                <span class="nav-link-text">Settings</span>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="navbar-vertical-footer">
        <button class="btn navbar-vertical-toggle border-0 fw-semibold w-100 white-space-nowrap d-flex align-items-center" data-navbar-vertical-toggle="">
            <span class="uil uil-left-arrow-to-left fs-8"></span>
            <span class="uil uil-arrow-from-right fs-8"></span>
            <span class="navbar-vertical-footer-text ms-2">Collapsed View</span>
        </button>
    </div>
</nav>