@if (checksettings('networkdiagram') == 'enable' &&
    (auth()->user()->can('diagram-pop-index') ||
        auth()->user()->can('diagram-mikrotik-index') ||
        auth()->user()->can('diagram-switch-index') ||
        auth()->user()->can('diagram-olt-index') ||
        auth()->user()->can('diagram-box-index') ||
        auth()->user()->can('diagram-view-index')))
    <li
        class="nav-item {{ request()->routeIs(['diagram-pop.*', 'diagram-mikrotik.*', 'diagram-switch.*', 'diagram-olt.*', 'diagram-box.*', 'diagram-view.*']) ? 'menu-open' : '' }}">
        <a href="#" class="nav-link">
            <i class="fas fa-project-diagram nav-icon"></i>
            <p>
                Network Diagram
                <i class="fas fa-angle-left right"></i>
            </p>
        </a>
        <ul class="nav nav-treeview">
            @can('diagram-pop-index')
                <li class="nav-item">
                    <a href="{{ route('diagram-pop.index') }}"
                        class="nav-link {{ request()->routeIs(['diagram-pop.*']) ? 'active' : '' }}">
                        <i class="ml-3 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                        <p>POPs</p>
                    </a>
                </li>
            @endcan

            @can('diagram-mikrotik-index')
                <li class="nav-item">
                    <a href="{{ route('diagram-mikrotik.index') }}"
                        class="nav-link {{ request()->routeIs(['diagram-mikrotik.*']) ? 'active' : '' }}">
                        <i class="ml-3 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                        <p>Mikrotik</p>
                    </a>
                </li>
            @endcan

            @can('diagram-switch-index')
                <li class="nav-item">
                    <a href="{{ route('diagram-switch.index') }}"
                        class="nav-link {{ request()->routeIs(['diagram-switch.*']) ? 'active' : '' }}">
                        <i class="ml-3 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                        <p>Switch</p>
                    </a>
                </li>
            @endcan

            @can('diagram-olt-index')
                <li class="nav-item">
                    <a href="{{ route('diagram-olt.index') }}"
                        class="nav-link {{ request()->routeIs(['diagram-olt.*']) ? 'active' : '' }}">
                        <i class="ml-3 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                        <p>OLT</p>
                    </a>
                </li>
            @endcan

            @can('diagram-box-index')
                <li class="nav-item">
                    <a href="{{ route('diagram-box.index') }}"
                        class="nav-link {{ request()->routeIs(['diagram-box.*']) ? 'active' : '' }}">
                        <i class="ml-3 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                        <p>Box</p>
                    </a>
                </li>
            @endcan

            @can('diagram-view-index')
                <li class="nav-item">
                    <a href="{{ route('diagram-view.index') }}"
                        class="nav-link {{ request()->routeIs(['diagram-view.*']) ? 'active' : '' }}">
                        <i class="ml-3 fa fa-circle nav-icon" style="font-size: 6px !important"></i>
                        <p>Diagram</p>
                    </a>
                </li>
            @endcan
        </ul>
    </li>
@endif