<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 <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</a>
        </div>
      </div>
    </div>

    <div class="nav-category" data-ng-show="current.realm">
        <h2>Configure</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] == 'theme-settings'
    || path[2] == 'token-settings'
    || path[2] == 'cache-settings'
    || 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</a>
            </li>
            <li data-ng-show="access.viewClients" data-ng-class="(path[2] == 'clients' || path[1] == 'client' || path[3] == 'clients') && 'active'"><a href="#/realms/{{realm.realm}}/clients"><i class="fa fa-cubes"></i> Clients</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(path[2] == 'roles' || path[2] == 'default-roles' || (path[1] == 'role' && path[3] != 'clients')) && 'active'"><a href="#/realms/{{realm.realm}}/roles"><i class="fa fa-tasks"></i> Roles</a></li>
            <li data-ng-show="access.viewRealm" 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</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(path[1] == 'user-federation' || path[2] == 'user-federation') && 'active'"><a href="#/realms/{{realm.realm}}/user-federation"><i class="fa fa-database"></i> User Federation</a></li>
            <li data-ng-show="access.viewRealm" data-ng-class="(path[1] == 'authentication' || path[2] == 'authentication') && 'active'"><a href="#/realms/{{realm.realm}}/authentication/flows"><i class="fa fa-lock"></i> Authentication</a></li>
        </ul>
    </div>

    <div class="nav-category" data-ng-show="current.realm">
        <h2>Manage</h2>
        <ul class="nav nav-pills nav-stacked">
            <li data-ng-show="access.viewUsers" data-ng-class="(path[2] == 'users' || path[1] == 'user') && 'active'"><a href="#/realms/{{realm.realm}}/users"><span class="pficon pficon-users"></span> Users</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</a></li>
            <li data-ng-show="access.viewEvents" data-ng-class="(path[2] == 'events' || path[2] == 'events-settings') && 'active'"><a href="#/realms/{{realm.realm}}/events"><i class="fa fa-calendar"></i> Events</a></li>
        </ul>
    </div>
</div>