I have a component to hide some parts of design depending on user permissions.

Just hide is not a problem. Sometimes I need to display something when user has no access.

route template:

```
{{#restricted-access required-action="AddRoles"}}
    <button class="btn btn-success"  {{action 'add'}}>
        Add New Role
    </button>
{{else}}
    You can not add Roles
{{/restricted-access}}

```

component check code:

```
actionAllowed: function() {
    var permission = this.get('current.user.role.roleActionList');
    return permissions.filterProperty('code', this.get('required-action')).length > 0;
}.property('current.user.role.roleActionList.length')

```

component template:

```
{{#if actionAllowed}}
    {{yield}}
{{/if}}

```

I'm looking for something like

```
{{#if actionAllowed}}
    {{yield}}
{{else}}
    {{else yield}}
{{/if}}

```

Where I can add text that is defined in route template.

I guess I can do something like that:

```
{{#restricted-access required-action="AddRoles"}}
    {{#access-granted}}
        <button class="btn btn-success"  {{action 'add'}}>
            Add New Role
        </button>
    {{#access-granted}}
    {{#access-declined}}
        You can not add Roles
    {{/access-declined}}
{{/restricted-access}}

```

Actually I do not like this As I had to create additional components.

Is there any way to implement required functionality in one component?