<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">
            {{ 'Preferences'|trans }}
        </h3>
    </div>
    <div class="card-body">
        <ul class="nav nav-pills nav-sidebar flex-column sidebar-menu" role="tablist">
            {# <li class="nav-header nav-item first">
                <span> <p>User Profile Settings</p></span>
            </li> #}
            <li class="nav-item">
                <a href="{{ path('_profile') }}" class="nav-link{{ menuItem is defined and menuItem is same as('profile') ? ' active'}}">
                    {{ icon('user') }}

                    <span class="icon">Profile</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('_change_password') }}" class="nav-link{{ menuItem is defined and menuItem is same as('security') ? ' active'}}">
                    {{ icon('lock') }}

                    <span class="icon">Security</span>
                </a>
            </li>
            {# <li class="nav-header nav-item first">
                <span> <p>Company Specific Settings</p></span>
            </li> #}
            <li class="nav-item">
                <a href="{{ path('_profile_notifications') }}" class="nav-link{{ menuItem is defined and menuItem is same as('notification') ? ' active'}}">
                    {{ icon('bell') }}

                    <span class="icon">Notifications</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('_api_keys_index') }}" class="nav-link{{ menuItem is defined and menuItem is same as('api') ? ' active'}}">
                    {{ icon('user-secret') }}

                    <span class="icon">API Keys</span>
                </a>
            </li>
        </ul>
    </div>
</div>

