<div kc-sidebar-resize class="col-sm-3 col-md-2 col-sm-pull-9 col-md-pull-10 sidebar-pf sidebar-pf-left" data-ng-controller="RealmDropdownCtrl">

    <div class="realm-selector">
      <h2 data-ng-show="current.realm">{{current.realm.realm|capitalize}} <i class="fa fa-angle-down"></i></h2>
      <h2 data-ng-hide="current.realm">{{:: 'select-realm' | translate}} <i class="fa fa-angle-down"></i></h2>
      <div class="realm-dropmenu">
        <!-- if it has more than 5 it generates a scroll bar -->
        <ul>
            <li data-ng-repeat="realm in current.realms | orderBy:'realm'" data-ng-if="realm.realm != current.realm.realm">
                <a href="" ng-click="changeRealm(realm.realm)">{{realm.realm|capitalize}}</a>
            </li>
        </ul>
        <div class="realm-add" data-ng-show="auth.user && access.createRealm">
          <a href="#/create/realm" class="btn btn-sm btn-block btn-primary">{{:: 'add-realm' | translate}}</a>
        </div>
      </div>
    </div>

    <div class="nav-category" data-ng-show="current.realm && (access.viewRealm || access.queryClients || access.viewIdentityProviders)">
        <h2>{{:: 'configure' | translate}}</h2>
        <ul class="nav nav-pills nav-stacked">
            <li data-ng-show="access.viewRealm" data-ng-class="((!path[2]
    || path[2] == 'required-credentials'
    || path[2] == 'login-settings'
    || path[2] == 'keys'
    || path[2] == 'theme-settings'
    || path[2] == 'token-settings'
    || path[2] == 'client-registration'
    || path[2] == 'cache-settings'
    || path[2] == 'client-initial-access'
    || path[2] == 'defense'
    || path[2] == 'keys-settings' || path[2] == 'smtp-settings' || path[2] == 'ldap-settings' || path[2] == 'auth-settings') && path[3] != 'clients') && 'active'">
                <a href="#/realms/{{realm.realm}}"><span class="pficon pficon-settings"></span> {{:: 'realm-settings' | translate}}</a>
            </li>
            <li data-ng-show="access.queryClients" data-ng-class="(path[2] == 'clients' || path[3] == 'clients') && 'active'"><a href="#/realms/{{realm.realm}}/clients"><i class="fa fa-cube"></i> {{:: 'clients' | translate}}</a></li>
            <li data-ng-show="access.viewClients" data-ng-class="(path[2] == 'client-templates' || path[3] == 'client-templates') && 'active'"><a href="#/realms/{{realm.realm}}/client-templates"><i class="fa fa-cubes"></i> {{:: 'client-templates' | translate}}</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(path[2] == 'roles' || path[2] == 'default-roles') && 'active'"><a href="#/realms/{{realm.realm}}/roles"><i class="fa fa-tasks"></i> {{:: 'roles' | translate}}</a></li>
            <li data-ng-show="access.viewIdentityProviders" data-ng-class="(path[2] == 'identity-provider-settings' || path[2] == 'identity-provider-mappers') && 'active'"><a href="#/realms/{{realm.realm}}/identity-provider-settings"><i class="fa fa-exchange"></i> {{:: 'identity-providers' | translate}}</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(
                        path[2] == 'user-federation'
                        || path[2] == 'user-storage'
                        || path[2] == 'ldap-mappers'
                        ) && 'active'"><a href="#/realms/{{realm.realm}}/user-federation"><i class="fa fa-database"></i> {{:: 'user-federation' | translate}}</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(path[2] == 'authentication') && 'active'"><a href="#/realms/{{realm.realm}}/authentication/flows"><i class="fa fa-lock"></i> {{:: 'authentication' | translate}}</a></li>
        </ul>
    </div>

    <div class="nav-category" data-ng-show="current.realm && (access.viewRealm || access.queryGroups || access.queryUsers || access.viewEvents)">
        <h2>{{:: 'manage' | translate}}</h2>
        <ul class="nav nav-pills nav-stacked">
            <li data-ng-show="access.queryGroups" data-ng-class="(path[2] == 'groups'
                        || path[2] == 'default-groups') && 'active'"><a href="#/realms/{{realm.realm}}/groups"><span class="pficon pficon-users"></span> {{:: 'groups' | translate}}</a></li>
            <li data-ng-show="access.queryUsers" data-ng-class="(path[2] == 'users' || path[2] == 'users-permissions') && 'active'"><a href="#/realms/{{realm.realm}}/users"><span class="pficon pficon-user"></span> {{:: 'users' | translate}}</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(path[2] == 'sessions') && 'active'"><a href="#/realms/{{realm.realm}}/sessions/realm"><i class="fa fa-clock-o"></i> {{:: 'sessions' | translate}}</a></li>
            <li data-ng-show="access.viewEvents" data-ng-class="(path[2] == 'events' 
                        || path[2] == 'events-settings'
                        || path[2] == 'admin-events') && 'active'"><a href="#/realms/{{realm.realm}}/events"><i class="fa fa-calendar"></i> {{:: 'events' | translate}}</a></li>
            <li data-ng-show="access.manageRealm" ng-class="(path[2] =='partial-import') && 'active'"><a href="#/realms/{{realm.realm}}/partial-import"><span class="pficon pficon-import"></span> {{:: 'import' | translate}}</a></li>
            <li data-ng-show="access.manageRealm" ng-class="(path[2] =='partial-export') && 'active'"><a href="#/realms/{{realm.realm}}/partial-export"><span class="pficon pficon-export"></span> {{:: 'export' | translate}}</a></li>
        </ul>
    </div>
</div>