<div data-ng-controller="RoleTabCtrl">
    <h1 data-ng-show="create">{{:: 'add-role' | translate}}</h1>
    <h1 data-ng-hide="create">{{role.name|capitalize}}<i class="pficon pficon-delete clickable" data-ng-show="!create && client.access.configure"
                                                         data-ng-hide="changed" data-ng-click="remove()"></i></h1>

    <ul class="nav nav-tabs" data-ng-show="!create">
        <li ng-class="{active: !path[6]}"><a href="#/realms/{{realm.realm}}/clients/{{client.id}}/roles/{{role.id}}">{{:: 'details' | translate}}</a></li>
        <li ng-class="{active: path[6] && path[6] == 'role-attributes'}"><a href="#/realms/{{realm.realm}}/clients/{{client.id}}/roles/{{role.id}}/role-attributes">{{:: 'attributes' | translate}}</a></li>
        <li ng-class="{active: path[6] && path[6] == 'permissions'}" data-ng-show="serverInfo.featureEnabled('ADMIN_FINE_GRAINED_AUTHZ') && access.manageAuthorization && client.access.configure">
            <a href="#/realms/{{realm.realm}}/clients/{{client.id}}/roles/{{role.id}}/permissions">{{:: 'authz-permissions' | translate}}</a>
            <kc-tooltip>{{:: 'manage-permissions-role.tooltip' | translate}}</kc-tooltip>
        </li>
        <li ng-class="{active: path[6] && path[6] == 'users'}" data-ng-show="access.viewUsers">
            <a href="#/realms/{{realm.realm}}/clients/{{client.id}}/roles/{{role.id}}/users">{{:: 'authz-users' | translate}}</a>
        </li>
    </ul>
</div>