<div data-ng-controller="GroupTabCtrl">
    <h1>
        {{group.name|capitalize}}
        <i id="removeGroup" class="pficon pficon-delete clickable" data-ng-show="group.access.manage" data-ng-click="removeGroup()"></i>
    </h1>

    <ul class="nav nav-tabs">
        <li ng-class="{active: !path[4]}"><a href="#/realms/{{realm.realm}}/groups/{{group.id}}">{{:: 'settings' | translate}}</a></li>
        <li ng-class="{active: path[4] == 'attributes'}"><a href="#/realms/{{realm.realm}}/groups/{{group.id}}/attributes">{{:: 'attributes' | translate}}</a></li>
        <li ng-class="{active: path[4] == 'role-mappings'}" ><a href="#/realms/{{realm.realm}}/groups/{{group.id}}/role-mappings">{{:: 'role-mappings' | translate}}</a></li>
        <li ng-class="{active: path[4] == 'members'}"><a href="#/realms/{{realm.realm}}/groups/{{group.id}}/members">{{:: 'members' | translate}}</a></li>
        <li ng-class="{active: path[4] == 'permissions'}" data-ng-show="group.access.manage && access.manageAuthorization">
            <a href="#/realms/{{realm.realm}}/groups/{{group.id}}/permissions">{{:: 'authz-permissions' | translate}}</a>
            <kc-tooltip>{{:: 'manage-permissions-group.tooltip' | translate}}</kc-tooltip>
        </li>
    </ul>
</div>