<vn-data-viewer
    data="data"
    class="vn-w-xs">
    <vn-card>
        <vn-list class="separated">
            <a class="vn-item"
                ng-repeat="row in data | orderBy:'inherits.name'"
                ui-sref="account.role.card.summary(::{id: row.inherits.id})"
                translate-attr="{title: 'View role'}">
                <vn-item-section>
                    <div>
                        {{::row.inherits.name}}
                    </div>
                    <div class="text-caption text-secondary">
                        {{::row.inherits.description}}
                    </div>
                </vn-item-section>
                <vn-item-section side>
                    <vn-icon-button
                        icon="delete"
                        translate-attr="{title: 'Remove'}"
                        vn-click-stop="removeConfirm.show(row)">
                    </vn-icon-button>
                </vn-item-section>
            </a>
        </vn-list>
    </vn-card>
</vn-data-viewer>
<vn-float-button
    icon="add"
    translate-attr="{title: 'Add'}"
    vn-bind="+"
    ng-click="$ctrl.onAddClick()"
    fixed-bottom-right>
</vn-float-button>
<vn-dialog
    vn-id="dialog"
    on-accept="$ctrl.onAddSave()">
    <tpl-body>
        <vn-autocomplete
            label="Role"
            ng-model="$ctrl.addData.inheritsFrom"
            url="VnRoles"
            vn-focus>
        </vn-autocomplete>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>
<vn-confirm
    vn-id="remove-confirm"
    message="Role will be removed"
    question="Are you sure you want to continue?"
    on-accept="$ctrl.onRemove($data)">
</vn-confirm>